# Temporary State

You can use temporary state to store and reference local data within an app. Every time you load or refresh an app, the value of temporary state value is reset.

## Use case scenarios

Temporary states may help in the following scenarios:

* To track the temporary values of a variable when the user interacts with your app.
* To store your data only in operation without persisting to a database.
* To function as a temporary property when built-in properties in Appizap(such as `{{table.selectedRow}}` and `{{select.value}}`) do not support your use case.

{% hint style="info" %}
To store and access data across apps in your workspace, use localStorage instead.
{% endhint %}

## Create a temporary state

Click **+ New** and select **Temporary state** in query editor.

You can rename the temporary state and set an initial value.

<figure><img src="https://125370873-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FzdpN2Lz0hzXpnNScDzVt%2Fuploads%2FLlH2UHtCfTt3Joh1WoJ8%2FAddNewTempState.gif?alt=media&#x26;token=14b63697-cc77-4765-b6e0-70ee29821586" alt=""><figcaption></figcaption></figure>

## Set state values

Temporary state offers `setValue()` and `setIn()` methods to set or change its value, which can be called in JavaScript queries.

Use `setValue()` to change the value directly.

```javascript
//state.setValue(value: any)
state.setValue(3)
state.setValue(input1.value)
```

When the initial value of a temporary state is an object, use `setIn()` to change the value in a specified path.

```javascript
// initial value of state2 as follows：
{
    girl: {
        name: "Lucy",
        age: 18,
        city: {
            name: "New York"
        }
     }
     boy: {
         name: "Bob",
         age: 21,
         city: {
             name: "Los Angeles"
         }
     }
}
//To change the value in a specified path
//state.setIn(path, any value)
//path: an array of keys or indexes. Only the last item in the path will be changed.
state2.setIn(['girl','city'],{name:'Seatle'})
state2.setIn(['boy','age'],18)


// To set value array value, you can use 
// init value = ["hello", "world"]
state2.setIn([1],"foo") // this will result to ["hello", "foo"]
```

You can also call these two methods in [event handlers](https://docs.appizap.ae/build-apps/event-handlers). Select **Set temporary state** as the action and choose method on demand.

## Example: Increment counter

For example, consider a counter and the counter tracks the number of button clicks. Every time the user clicks the button, the number in the text component increases by one.

Build an increment counter in following steps:

1. Add a button component `button1` and a text component `text1`.
2. Create a temporary state `state1`, set its initial value as `0`. Bind `{{state1.value}}` as the display text of `text1`.
3. Add an event handler for `button1`. Select the action **Set temporary state** and the method **setValue**, and then set `{{state1.value+1}}` as the value.
4. Click the button, you can see the value of `text1` increases by one each time you click.

You can also achieve the same result using JavaScript queries:

1. Add a new query, select **Run JavaScript code**.
2. Write JavaScript query with this code, and set it to be manually invoked:\
   `state1.setValue(state1.value + 1)`
3. Add an event handler of `button1` to run `query1`.

Now click the **Increment counter** button, you should see the same result as above.