Temporary state
Last updated
Last updated
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.
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 PocketBlocks (such as {{table.selectedRow}}
and {{select.value}}
) do not support your use case.
To store and access data across apps in your workspace, use localStorage instead.
Click + New and select Temporary state in query editor.
You can rename the temporary state and set an initial value.
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.
When the initial value of a temporary state is an object, use setIn()
to change the value in a specified path.
You can also call these two methods in event handlers. Select Set temporary state as the action and choose method on demand.
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.
Build an increment counter in following steps:
Add a button component button1
and a text component text1
.
Create a temporary state state1
, set its initial value as 0
. Bind {{state1.value}}
as the display text of text1
.
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.
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:
Add a new query, select Run JavaScript code.
Write JavaScript query with this code, and set it to be manually invoked:
state1.setValue(state1.value + 1)
Add an event handler of button1
to run query1
.
Now click the Increment counter button, you should see the same result as above.