# State variables

State variables function as *temporary storage* while users interact with your app. They reset to their initial values upon a page refresh or when the app is closed.

{% hint style="info" %}
For persistent storage that remains intact upon page reloads, consider exploring [Local storage](/concepts/localstorage.md).
{% endhint %}

State variables come in two **scopes**:

* *App* - maintain their values across different pages
* *Page* - maintain their values only within a specific page

State variables can possess the following **attributes**:

* *Name* - the unique identifier
* *Type*
  * String
  * Number
  * Boolean
  * Object
  * Arrray
* *Initial value* - the starting value of the variable

State variables can be organized using the **folder** structure of the *Actions* panel, allowing you to place relevant variables near the actions and logic they are associated with.

<figure><img src="/files/BskEpOwaJwOwNZmhyPmh" alt=""><figcaption></figcaption></figure>

## Creating a state variable

You can create a state variable, same as you would create an Action, from the **Actions** panel. You just need to click the *plus sign* and select **State variable**. From there, specify your variable *type*, assign it an initial *value*, and give the variable a meaningful *name*.

That's it! You can now read and write to this variable. Depending on its scope, it will be available either in the whole app or on a particular page.

<figure><img src="/files/q5B4Y1XwJ9mgodVNJkko" alt=""><figcaption></figcaption></figure>

## Working with a state variable

Now that you've created a state variable, let's explore how you can use it in your app. Within the app, all variables can be accessed using the `{{state.<variableName>}}` scope.

<figure><img src="/files/vPqeGknXQmnqHHmH6Q3o" alt=""><figcaption></figcaption></figure>

You can also assign a value to a variable using the **Save to State** **action** or directly through **JavaScript code blocks**. Check out the sections below for more details :point\_down:

### Save to State action

To store a value within an action, follow these steps:

1. Add a new *step* to your action and select **Save to State**.
2. Select the variable you want to modify.
3. Define a new value for the variable, which can either be hardcoded or derived from an available variable.\
   For example,`{{data}}` to reference the result of a previous action step, or `{{ui.component.value}}` to access a component's state.

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

### Save and reset variable value with code

You can use state variables in JavaScript code blocks to:

* **Save** state values

```js
state.varName = 'newValue';

// or using setValue method
state.setValue('varName', 'newValue');
```

* **Read** state values

```js
state.varName;

// or using getValue method
state.getValue('varName');
```

* **Reset** a single variable or all variables to the initial value

```js
state.resetValue('varName');
```

```js
// reset all variables, page and app state
state.resetValues();

// reset all page variables
state.resetValues('page');

// reset all app (global) variables
state.resetValues('app');
```

Let's review an example of resetting a state variable value - you have a **Text input** component and you would like it to reset its value after a comment is left.&#x20;

Here's how you can do that:

1. Create a state variable of the **String** type, define its initial value, and name it *Comment*, for example.
2. Assign the variable to the *Text input* component's **Value** field.
3. Create a **Save to State** action that will save the new comment - define its value as `{{data}}`.
4. Assign this action to the **On Change** trigger of the *Text input* component.
5. Next, create another *Save to State* action, that will reset the comment - define its value as `''`.
6. Now, add a **Button** component to the working area and assign the *Reset* action to its **On Click** trigger.

Done! Now, after you leave a comment and click the button, the component will reset its value.

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


---

# 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/app-state-variables.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.