# Local storage

`localStorage` is permanent browser storage, which is available across all browser tabs of your application and after page refresh. You can find more details about it [here](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage).

To save data to the `localStorage`, you can use the **Save to Local Storage** action or the **JavaScript Code** action - `setItem`.

After that, you'll be able to use the data from either of these actions with `{{localStorage.getItem('varName')}}`, where `varName` is the name of the variable used in the action. 

{% @arcade/embed flowId="G4oWCIYYzfaEbZdeKGIp" url="<https://app.arcade.software/share/G4oWCIYYzfaEbZdeKGIp>" %}

## Using localStorage API

<table><thead><tr><th width="309">Method</th><th>Description</th></tr></thead><tbody><tr><td><code>getItem(key)</code></td><td>Retrieves the value associated with the specified key.</td></tr><tr><td><code>async setItem(key, value)</code></td><td>Adds key's value or updates key's value if it already exists. Method throws an error when size quota is exceeded.</td></tr><tr><td><code>async removeItem(key)</code></td><td>Removes the key-value pair with the specified key.</td></tr><tr><td><code>async clear()</code></td><td>Clears all key-value pairs stored in <code>localStorage</code>.</td></tr></tbody></table>

Examples of usage:

```javascript
// 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();
```

## Use case: Saving a draft message

In this example, we will show you how you can use local storage to save a *draft* message so that it's not lost upon page refresh or closing the app.

1. Start with adding a **Text input** component to the working area.
2. Next, create a **Save to Local Storage** action, and specify the variable *name* and *value*.
3. Assign this action to the ***OnChange*** trigger of the Text input component.
4. Finally, assign the `localStorage` variable to the **Value** filed of the Text input:\
   `{{localStorage.getItem('draft')}}`.

{% @arcade/embed flowId="d2MPTYFIoAiFuhAXZYSd" url="<https://app.arcade.software/share/d2MPTYFIoAiFuhAXZYSd>" %}