Store Value

This function is used to store key-value data to access later anywhere in the app.
Appsmith storeValue works similar to the browser's localStorage method setItem.
Signature
1
storeValue(key: string, value: any, persist? = true): Promise
Copied!
Arguments
Argument Name
Description
key
Name of the key to store the value against
value
Value to give the key you are creating/updating
persist
This key value gets persisted in the browser's local storage to use between sessions. Defaults to true
Reading values
You can read values from the store by referencing the key inside the appsmith.store object
1
{{ appsmith.store.key }}
Copied!
Usage
In Appsmith, there are two types of storeValue. The first is a persistent store, and the second is a session store. 
The storeValue in Appsmith works similar to the browser's localStorage method setItem.​
Persistent Store
If you store a value in the persistent store, it will remain in the store across different sessions/pages. For example, if you store a value in a persistent store, the value will be saved even if the page is reloaded.
You can set a persistent value by simply calling the store value with two parameters: one is the property name and the other is the value of the text. Let's see how it works:
Drag and drop the input widget to the canvas. 
Now, go to the widget properties.
Next, in the ontextchanged action, toggle JS option.
Now copy and paste the code below, adjusting the value as needed.
1
{{storeValue('one',Input1.text)}}
Copied!
By default persist will be true, if you want to use session store you have to define persist=false. 
The persisted state is cleared out when a user logs out.
Session Store
If you want to store value only for a session and have it cleared when you reload the page or close the window, you can use the session store. Let's see how it works:
Drag and drop another input widget to the canvas. 
Now, go to the widget properties.
Next, in the ontextchanged action, toggle the JS option.
Now copy and paste the following code, adjusting the value as needed.
1
{{storeValue('two',Input2.text, false)}}
Copied!
The GIF below demonstrates how both functions work.
Persistent vs Session Store
Session store (persist=false) is only available till the user exits the app or refreshes a page.
If the same key is available in the session and persisted states, the session value gets a preference.
Store value is asynchronous and thus, you cannot read the effect of store value in the next line itself.
Clear store value
To clear the value in the store, you can set its value to undefined.
1
{{
2
  storeValue("userID", undefined);
3
}}
Copied!
Clear Persistent store value
If you want a clear persistent store value, you must define two parameters as follows:
1
{{
2
storeValue('one', ''); 
3
}}
Copied!
Clear Session store value
If you want to clear the session store value, you must define three parameters as follows:
1
{{
2
storeValue('two', '', false);
3
}}
Copied!
What's Next
Check out this app to learn more about persistent and session stores. You can fork this app to have a better understanding of it.

Framework Reference - Previous

Navigate To

Next - Framework Reference

Copy To Clipboard

Last modified 1d ago

Copy link

Edit on GitHub

Contents