Learning about state management — WeWeb and external resources

Feel free to correct my terminology below. I don’t know what I don’t know about this stuff!

Hello WeWeb community :wave:

As I’m building an app for a client, I’m trying to get my head around “state management” and how it would apply to best practices at WeWeb, such as…

  • Using a query parameter vs using a variable
  • Deciding whether to save a variable to local storage or not

Back-end vs front-end state management: my understanding
As I understand, if I want to store data on a particular page, during a session, or within the browser for a certain period of time but not in my database, I’ll store it on the front-end. This is “state management”

  1. Is this a correct understanding of state management?

And as I understand, there are a few different ways to do this:

A) variables (regular and local…and session?)
B) query parameters
C) cookies

  1. Is this a correct understanding?

  2. Where are these variables stored—both “regularly” and with the “save to local storage” option? In WeWeb’s case, are there any session variables?

  3. How long do variables (regular and local) last? Cookies?

  4. Is there a way to control the length of time variables are stored?

  5. When would I want to use a query parameter vs a variable vs a locally stored variable vs a cookie?

This video by the WeWeb team is a great start, but I’d love an even more in-depth guide or link to resources to help understand these concepts. If it’s helpful for reference, I feel like this content from Bubble would be useful if I was trying to understand the concept in their world.

For others wondering, I found this link helpful to understand localStorage vs sessionStorage vs cookies.

Hey @caffeinatedwes ,

  1. Yes
  2. Yes :). Even if for now Weweb does not provide a way to handle cookies. Also cookies is more for communicate with the backend (either send to it, or set by it)
  3. For “normal” variable in Weweb, they are stored in the JS process. So they exist as long as you do not refresh the browser. If you toggle the “Saved in localStorage” then they are store in the local storage
  4. As you may have read on your link, local storage/session storage and cookie are persisted on reload, but can also be cleared by a user manually. Difference between local and session is that session is clean when closing the tab.
  5. For cookie yes, its a native functionality. For session and local, you have to handle it by yourself (add an expiracy date and delete the old one when trying to read it).
  6. Thats the big question
    • Query parameter = When you want the data to be share by link. For exemple if this is a filter, or an id to display a product, and you want the user to access to this page filtered by directly clicking on the link
    • Variable: basic usecase. You go to an other solution if you are not in a usecase which need the other solution
    • Local storage: basically when you want to persist data accross user navigation and session. Good example inside Weweb editor (our own app ^^): we use it to “save” what section of the edition panel you like to have open, or if you want the developer info or the dark mode.
    • Session storage is used to pass data across pages/script. With Weweb you probably will not need it, as we are doing client side navigation. But can be use by other scripts
    • Cookies: when you need to discuss with your backend and/or if you need security. Cookies can be encoded, but also be “blocked” and not be read by javascript on the page. In this case they will persist across all networks exchanges with the backend, but the client side will not be able to read it. This is more secure for example for auth token, which are just needed to be send to the backend, but are not used by the client browser/js logic itself. Be aware that you need to activate this options when you set your cookie.

Don’t know if i make it clearer :), let me know

4 Likes

Amazing response.

Yes, this cleared a lot of doubts and uncertainty I had about state management (and how WeWeb handles it).

Thank you very much!

claire-dancing

1 Like

@aurelie

Is it good practice to display any information from the Xano Plugin?

For instance, we have text on the page that binds to the XanoAuth.name variable that says “Welcome, John Smith”

But, if a user refreshes the page, this name disappears.

I can see in the JS console, that the variable still has the data, but it does not work in the binding at that point.

Hmmm that’s strange, this should normally work if user data is refetched on page load.

@aurelie I think this is the same thing that is happening here:

1 Like