Set localStorage

This action allows you to specify a key and its corresponding value to be stored in local storage of the browser. Local storage can be useful in a lot of scenarios. Some of the most common use cases of the local storage includes:

• Saving form values so that users don't accidentally lose them if they reload the page
• Storing any kind of data that is not going to be transferred to the database

<div style={{paddingTop:'24px', paddingBottom:'24px'}}>

Example: Setting a Component Value Based on Local Storage

1. Add Text Input, Button and Text components to the canvas.

   <div style={{textAlign: 'center', marginBotton:'25px'}}> </div>

2. Select the Button, add a new event handler, and add a Set local storage action with key set to localtest and value set to {{components.textinput1.value}}.

   <div style={{textAlign: 'center'}}> </div>

   This will set a local storage value with localtest as the key and the value entered in the Text Input component as its value.

3. Create a Run JavaScript code query, and enter the code below:

   jsCopy

   return localStorage.getItem("localtest");
   

   <div style={{textAlign: 'center'}}> </div>

   Click on the Run button in the Query Panel. This query will fetch the localtest local storage variable that we had set earlier.

4. Select the Text component. Under its Text property, enter {{queries.runjs1.data}}. Now, the Text component will display the value returned by the Run JavaScript code query - the local variable we had set earlier.

   <div style={{textAlign: 'center'}}> </div>

5. Select the Button component. Add a new event handler to it, add a Run query action, select runjs1 as the query, and set a debounce of 300.

   <div style={{textAlign: 'center', marginBottom:'15px'}}> </div>

   Now, every time you click on the Button component, it will set the local storage value, and the Text component will display the value set in local storage.

   :::info Debounce field is empty by default, you can enter a numerical value to specify the time in milliseconds after which the action will be performed. ex: 300 :::

</div>