Back to Tooljet

Set localStorage

docs/versioned_docs/version-2.3.0/actions/set-localstorage.md

3.20.154-lts1.6 KB
Original Source

Set localStorage

This action allows you to specify a key and its corresponding value to be stored in localStorage.

Example: App that stores a name in localStorage and displays it on reload

  1. Add an input field, button and a text as shown
<div style={{textAlign: 'center'}}>

</div>
  1. Select the button and add a Set localStorage action with key set to name and value pointing at the value of the text field
<div style={{textAlign: 'center'}}>

</div>
  1. Select the text label we've added and set its value to the name item from localStorage.

:::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 style={{textAlign: 'center'}}>

</div>
  1. Now save the application, this is important as we're about to reload the page.

  2. Type in anything you wish on the input box and click on the button

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

</div>
  1. Reload the page, you'll see that the value stored in local storage is persisted and it is displayed on screen!
<div style={{textAlign: 'center'}}>

</div>