Local Storage

Using localStorage

localStorage is 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}}.getItem('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 localStorage API

Method	Description
getItem(key)	Retrieves the value associated with the specified key.
async setItem(key, value)	Adds key's value or updates key's value if it already exists. Method throws error when size quata exceeded.
async removeItem(key)	Removes the key-value pair with the specified key.
async clear()	Clears all key-value pairs stored in localStorage.

Example usage:

// Save data to localStorage
await {{localStorage}}.setItem('foo', 'bar');

// Retrieve data from localStorage
const username = {{localStorage}}.getItem('foo');

// Remove data from localStorage
await {{localStorage}}.removeItem('foo');

// Clear all data from localStorage
await {{localStorage}}.clear();