|
| 1 | +# Temporary state |
| 2 | + |
| 3 | +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. |
| 4 | + |
| 5 | +## Use case scenarios |
| 6 | + |
| 7 | +Temporary states may help in the following scenarios: |
| 8 | + |
| 9 | +* To track the temporary values of a variable when the user interacts with your app. |
| 10 | +* To store your data only in operation without persisting to a database. |
| 11 | +* To function as a temporary property when built-in properties in Openblocks (such as `{{table.selectedRow}}` and `{{select.value}}`) do not support your use case. |
| 12 | + |
| 13 | +{% hint style="info" %} |
| 14 | +To store and access data across apps in your workspace, use localStorage instead. |
| 15 | +{% endhint %} |
| 16 | + |
| 17 | +## Create a temporary state |
| 18 | + |
| 19 | +Click **+ New** and select **Temporary state** in query editor. |
| 20 | + |
| 21 | +<figure><img src="../../.gitbook/assets/temporary-state-1.png" alt=""><figcaption></figcaption></figure> |
| 22 | + |
| 23 | +You can rename the temporary state and set an initial value. |
| 24 | + |
| 25 | +<figure><img src="../../.gitbook/assets/temporary-state-2.png" alt=""><figcaption></figcaption></figure> |
| 26 | + |
| 27 | +## Set state values |
| 28 | + |
| 29 | +Temporary state offers `setValue()` and `setIn()` methods to set or change its value, which can be called in JavaScript queries. |
| 30 | + |
| 31 | +Use `setValue()` to change the value directly. |
| 32 | + |
| 33 | +```javascript |
| 34 | +//state.setValue(value: any) |
| 35 | +state.setValue(3) |
| 36 | +state.setValue(input1.value) |
| 37 | +``` |
| 38 | + |
| 39 | +When the initial value of a temporary state is an object, use `setIn()` to change the value in a specified path. |
| 40 | + |
| 41 | +```javascript |
| 42 | +// initial value of state2 as follows： |
| 43 | +{ |
| 44 | + girl: { |
| 45 | + name: "Lucy", |
| 46 | + age: 18, |
| 47 | + city: { |
| 48 | + name: "New York" |
| 49 | + } |
| 50 | + } |
| 51 | + boy: { |
| 52 | + name: "Bob", |
| 53 | + age: 21, |
| 54 | + city: { |
| 55 | + name: "Los Angeles" |
| 56 | + } |
| 57 | + } |
| 58 | +} |
| 59 | +//To change the value in a specified path |
| 60 | +//state.setIn(path, any value) |
| 61 | +//path: an array of keys or indexes. Only the last item in the path will be changed. |
| 62 | +state2.setIn(['girl','city'],{name:'Seatle'}) |
| 63 | +state2.setIn(['boy','age'],18) |
| 64 | + |
| 65 | + |
| 66 | +// To set value array value, you can use |
| 67 | +// init value = ["hello", "world"] |
| 68 | +state2.setIn([1],"foo") // this will result to ["hello", "foo"] |
| 69 | +``` |
| 70 | + |
| 71 | +You can also call these two methods in [event handlers](../event-handlers.md). Select **Set temporary state** as the action and choose method on demand. |
| 72 | + |
| 73 | +<figure><img src="../../.gitbook/assets/temporary-state-3.png" alt=""><figcaption></figcaption></figure> |
| 74 | + |
| 75 | +## Example: Increment counter |
| 76 | + |
| 77 | +In this example, the counter tracks the number of button clicks. Every time the user clicks the button, the number in the text component increases by one. |
| 78 | + |
| 79 | +<figure><img src="../../.gitbook/assets/temporary-state-4.png" alt=""><figcaption></figcaption></figure> |
| 80 | + |
| 81 | +Build an increment counter in following steps: |
| 82 | + |
| 83 | +1. Add a button component `button1` and a text component `text1`. |
| 84 | +2. Create a temporary state `state1`, set its initial value as `0`. Bind `{{state1.value}}` as the display text of `text1`. |
| 85 | + |
| 86 | + <figure><img src="../../.gitbook/assets/temporary-state-5.png" alt=""><figcaption></figcaption></figure> |
| 87 | +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. |
| 88 | + |
| 89 | + <figure><img src="../../.gitbook/assets/temporary-state-6.png" alt=""><figcaption></figcaption></figure> |
| 90 | +4. Click the button, you can see the value of `text1` increases by one each time you click. |
| 91 | + |
| 92 | + <figure><img src="../../.gitbook/assets/temporary-state-7.gif" alt=""><figcaption></figcaption></figure> |
| 93 | + |
| 94 | +You can also achieve the same result using JavaScript queries: |
| 95 | + |
| 96 | +1. Add a new query, select **Run JavaScript code**. |
| 97 | +2. Write JavaScript query with this code, and set it to be manually invoked:\ |
| 98 | + `state1.setValue(state1.value + 1)` |
| 99 | +3. Add an event handler of `button1` to run `query1`. |
| 100 | + |
| 101 | + <figure><img src="../../.gitbook/assets/temporary-state-8.png" alt=""><figcaption></figcaption></figure> |
| 102 | + |
| 103 | +Now click the **Increment counter** button, you should see the same result as above. |
0 commit comments