# 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>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/concepts/localstorage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.