localStorage and state variable

Using localStorage
localStorage is a permanent browser storage, which is available across all browser tabs of your application and after the page refresh. You can find more details about it here.
localStorage can be used as a temporary storage in the following cases:
the data needs to be saved after a page refresh;
the data needs to be available across all browser tabs.
To save the data to the localStorage, use the action Save to Local Storage, and assign your variable a name. To use the data from it, use {{localStorage.varName}}, where varName is the name of the variable used in the action.
Use case: saving a draft message
Let's check the localStorage usage on a simple example. We will add a text area component and save a draft of the message so that it's not lost upon a page refresh or when a user closes the app.
1.Start with adding a text area component onto the working area.
2.Next, add a new action - Save to local storage. Specify the variable name and the value, and assign the action to the OnChange trigger of the text component
3. Finally, assign the localStorage variable to the Value filed of the text:
Using a state variable
state variable can be used as a temporary storage while the users are interacting with your app and it doesn't need to be saved to your datasource immediately. state variable is reset to the initial value on a page refresh or when the app is closed. state variable is persistent per single page only.
To create a state variable, follow these steps:
1.On the App Structure pane, click the + icon near the State tab.
2.Give your variable a name, select its type and assign its initial value.
3.Click Save. 
Creating a state variable
To save to a state variable, use the Save to state action type.
Use case: resetting a text field after sending the data
Let's check how to use a state variable on an example. Say you have a text component and would like to reset its' value after a comment is left. Here's how to do that:
1.Create a state variable of a string type.
2.Assign the state variable to the text Value field:
3. Create a Save to State action, that will save the new comment and assign it to the On Change trigger of the text component:
4. Next, add another Save to State action, that will reset the comment:
5. Finally, drag a button onto the working area and assign the reset action on its On Click trigger:

How Tos - Previous

Modify components with CSS

Next - How Tos

Add navigation to application

Last modified 1mo ago

Copy link

Outline

Using localStorage

Using a state variable