Feel free to correct my terminology below. I don’t know what I don’t know about this stuff!
Hello WeWeb community
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”
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
Is this a correct understanding?
Where are these variables stored—both “regularly” and with the “save to local storage” option? In WeWeb’s case, are there any session variables?
How long do variables (regular and local) last? Cookies?
Is there a way to control the length of time variables are stored?
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.
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)
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
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.
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).
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.
