localStorage and state variable
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
varNameis the name of the variable used in the action.
Let's check the
localStorageusage 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
localStoragevariable to the Value filed of the text:
statevariable 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.
statevariable is reset to the initial value on a page refresh or when the app is closed.
statevariable is persistent per single page only.
To create a
statevariable, 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.
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: