Plugin provides an easy way to store, retrieve, and manage data in the browser's Session Storage, Local Storage, and Cookies. It supports both encrypted and unencrypted data storage, with the ability to set expiration dates for stored items. The plugin also allows for error handling and reporting, ensuring smooth data management.
With this plugin, users can store and access data with ease, set cookie values, clear storage data, and retrieve multiple stored items at once. Encryption and decryption of stored data are supported to enhance security. The plugin includes a range of events and states to handle errors and display results, making it highly customizable and adaptable for various web applications.
How to setup
Install the plugin
Set the plugin element “Browser Storage” on the page
Use element actions
Plugin Element “Browser Storage”
Element Actions
Store Data in Browser
Stores data in the browser's Session or Local Storage with optional encryption and a customizable expiration date. Ensures secure storage of sensitive information and provides flexibility in managing data for your application.
Title
Description
Type
Key
A unique identifier that serves as the "name" for the stored data. It is used to reference and retrieve the data later from the browser's Session or Local Storage. Each key must be unique within the selected storage type to avoid overwriting existing data. For example, if you store data with the key "userProfile", you can later use the same key to fetch or remove that specific data.
Text
Value Type
The type of data being stored (e.g., string, number, JSON, etc.), ensuring compatibility and proper handling.
App Type
Value
The actual data you want to store. It could be anything: a name, a number, a list, or even a more complex object (like user settings or preferences). This is the information you’re saving to the browser’s storage.
As Value Type
Storage Type
This property decides where to store the data. You can choose:
• "Session Storage": The data will be stored temporarily, and it will disappear when the browser is closed or the session ends.
• "Local Storage": The data will stay saved even if you close the browser or restart the computer.
Dropdown (Session Storage,Local Storage)
Expires
The expiration date of the stored data. This tells the browser when the data should no longer be valid or should be removed automatically. You can set it to a specific date and time in the future, and when that time arrives, the data will expire.
Date
-----ENCRYPTION---—
Enable Encryption?
If set to checked, it means the data will be encrypted before being stored, making it more secure. This is useful if you're storing sensitive information like passwords or personal details and want to protect it from being easily read or accessed.
Checkbox
Secret Key
(Optional) If encryption is enabled, the Secret Key is the secret key used to encrypt and decrypt the data. Think of it as a password that locks and unlocks the data. Only someone with the correct secret key will be able to read the encrypted data. If you don’t need encryption, you can leave this field empty.
Text
Get Browser Data
This action retrieves data from the browser’s Session Storage or Local Storage, decrypts it (if encryption is enabled), and publishes the data along with its expiration date. The action supports both encrypted and plain text retrieval, allowing you to store and fetch secure information while handling expiration timestamps.
Fields:
Title
Description
Type
From Storage
• Specifies the source of the data. Choose one of the following options:
◦ "Session Storage": Retrieve the data from the browser’s Session Storage.
◦ "Local Storage": Retrieve the data from the browser’s Local Storage.
Dropdown(Session Storage,Local Storage)
Key
The unique identifier used to retrieve the stored data from the selected storage (Session or Local). It should match the key used when the data was originally stored.
Text
-----ENCRYPTION---—
Is Data Encrypted?
This property indicates whether the data is encrypted. Set it to checked if the stored data was encrypted, and unchecked if the data is plain text. If encryption is enabled, the action will decrypt the data using the secKey.
Checkbox
Secret Key
The Secret Key is the secret key used for decrypting the data. If the data in storage is encrypted, this key is required to decrypt and retrieve the original value. The key should be kept secure, as it is essential for accessing the encrypted data. If Is Data Encrypted? is unchecked, then this property is not used, as the data is stored in plain text and does not require decryption.
Text
Remove Data in Browser
This action removes data from the browser’s Session Storage or Local Storage based on the provided key. It helps clear stored data by key, either for temporary (session-based) or persistent (local) storage, depending on the user's choice. The action ensures the proper removal of the data and handles any errors that may arise during the process.
Title
Description
Type
Key to Remove
The unique identifier used to locate the data to be removed from storage. It should match the key used when the data was originally stored. This property specifies which data entry to delete from the selected storage.
For example, if you stored a user’s preference with the key "userTheme", passing "userTheme" as key would remove that entry from the storage.
Text
From
The from property determines the source of the data to be removed. It can be one of the following options:
• "Session Storage": Removes the data from the browser’s Session Storage. Session Storage stores data only for the duration of the page session, and the data will be cleared once the browser or tab is closed.
• "Local Storage": Removes the data from the browser’s Local Storage. Local Storage persists the data even after the browser is closed, so this option clears the data from the persistent storage.
Dropdown (Session Storage,Local Storage)
Store Cookie
This action sets a cookie in the user's browser with the specified name, value, and optional expiration time. This action provides an easy way to store data in cookies, which can be used for things like maintaining user sessions or storing preferences.
Fields:
Title
Description
Type
Cookie Name
The key under which the cookie will be stored. It is a unique identifier for the cookie and should be used to retrieve or delete the cookie later. For example, "userPreference" could be a valid name for a cookie storing user-specific settings.
Text
Cookie Type
Sets the Type for the Cookie value.
App Type
Cookie Value
The value is the data that will be stored in the cookie.
If you need to store complex data like user preferences, you might store it as a stringified JSON object. Be aware that cookies have a size limit (usually around 4KB).
As Cookie Type
Days to Expire
Specifies the lifespan of the cookie in days. This number determines when the cookie will expire and be automatically deleted by the browser.
A positive integer value (e.g., 7) will set the cookie to expire after that many days. If not specified, the cookie is a session cookie, meaning it will be deleted when the browser session ends (i.e., when the user closes the browser or tab).
The expire value should be a positive integer representing the number of days from the current date when the cookie will expire.
Number
Read Cookie
This action retrieves the value of a specific cookie by its name and then outputs the cookie's value to the associated state. The cookie is accessed using its name, provided as a parameter.
Title
Description
Type
Cookie Name
Specifies the name of the cookie you wish to retrieve. This should match the exact name of the cookie as it was set earlier.
Text
Delete Cookie
This action removes a specific cookie by its name. If any error occurs while attempting to remove the cookie, an error event is triggered, and the error message is published.
Fields:
Title
Description
Type
Cookie Name
Specifies the name of the cookie you wish to remove. This should match the exact name of the cookie you want to delete. The cookie will be removed from the browser's storage if it exists.
Text
Clear Plugins Output
Clears the plugin element exposed states values. Sets them empy.
Get Data as List
This action retrieves multiple items from either Session Storage or Local Storage based on the provided list of keys. It takes a list of keys, fetches the associated data from the specified storage, and outputs the values as a list. The action handles both Session Storage and Local Storage retrievals. If any errors occur during the retrieval process, an error event is triggered, and the error message is published.
Fields:
Title
Description
Type
List of Keys
A list of keys that specify the names of the items to retrieve from the storage. The list can contain one or more keys. Each key corresponds to an item stored in either Session Storage or Local Storage.
Text List
Storage Type
Specifies where to retrieve the data from. It can be one of the following options:
• "Session Storage": Fetches the items from sessionStorage.
• "Local Storage": Fetches the items from localStorage.
Dropdown (Session Storage, Local Storage)
Exposed states
Name
Description
Type
AccountError Message
Used to store and display error messages triggered during the execution of actions. This state is populated when an error occurs, such as during storage retrieval, data decryption, or invalid data operations.
Text
Get Data Output
Holds the output value of the retrieved or processed data from browser storage (Session Storage or Local Storage). It contains the value fetched using the provided keys or the decrypted content after processing, depending on the configuration.
Text
Expiry
Stores the expiration date of the data retrieved from browser storage. This is typically the time at which the stored data will no longer be valid and can be removed or marked for expiry.
Date
Get Data as List
A collection of values fetched from browser storage (either Session or Local Storage) based on a list of provided keys. It stores an array of the values corresponding to each key in the list. This state is populated when multiple keys are provided, and their values are successfully retrieved.
State filled in “Get Data as List” action.
Text List
Data as Bubble Date
holds a JavaScript Date object derived from the data that is retrieved or decrypted from storage. If the retrieved or decrypted value is a date string or a timestamp, this state converts that value into an actual Date object. This allows the data to be processed and displayed as a date in the application.
Date
Element Events
Name
Description
Had an Error Saving
triggered whenever an error occurs during the execution of any action, such as issues with accessing, decrypting, or saving data to storage (Session or Local Storage), or handling cookies.
Changelogs
Update 20.07.24 - Version 1.14.0
Minor update.
Update 03.06.24 - Version 1.13.0
Updated demo/service links.
Update 11.01.24 - Version 1.12.0
removed unnecessary console logs.
Update 19.10.23 - Version 1.11.0
Updated description.
Update 18.09.23 - Version 1.10.0
updated description.
Update 13.09.23 - Version 1.9.0
minor updates.
Update 11.07.23 - Version 1.8.0
updated description.
Update 16.06.23 - Version 1.7.0
Updated the description .
Update 23.02.23 - Version 1.6.0
deleted the icons.
Update 21.02.23 - Version 1.5.0
updated the description.
Update 14.07.21 - Version 1.4.0
Updated icon.
Update 17.02.21 - Version 1.3.0
Updated icon.
Update 17.06.19 - Version 1.2.0
Minor fixes.
Update 02.03.18 - Version 1.1.0
Added Get Browser Data As List (Non Encrypted for Now).
