mirror of
https://github.com/ToolJet/ToolJet
synced 2026-04-22 22:17:55 +00:00
59 lines
2.9 KiB
Markdown
59 lines
2.9 KiB
Markdown
|
---
|
||
|
|
id: set-localstorage
|
||
|
|
title: Set localStorage
|
||
|
|
---
|
||
|
|
|
||
|
|
# 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'}}>
|
||
|
|
<img className="screenshot-full" src="/img/actions/localstorage/add-components.png" alt="Add Components To The Canvas" />
|
||
|
|
</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'}}>
|
||
|
|
<img className="screenshot-full" src="/img/actions/localstorage/set-local-storage.png" alt="Set Local Storage" />
|
||
|
|
</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:
|
||
|
|
|
||
|
|
```js
|
||
|
|
return localStorage.getItem("localtest");
|
||
|
|
```
|
||
|
|
<div style={{textAlign: 'center'}}>
|
||
|
|
<img className="screenshot-full" src="/img/actions/localstorage/create-runjs-query.png" alt="Create RunJS Query" />
|
||
|
|
</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'}}>
|
||
|
|
<img className="screenshot-full" src="/img/actions/localstorage/update-text-component.png" alt="Update Value Of Text Component Based On Local Storage" />
|
||
|
|
</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'}}>
|
||
|
|
<img className="screenshot-full" src="/img/actions/localstorage/update-text-on-button-click.png" alt="Updating Text On Button Click" />
|
||
|
|
</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>
|