# Save to Chrome storage
**Supported Storage Types**
With Charles Chrome Extension you have a variety of storage options to suit different needs within your Bubble app. Below are the storage contexts you can use:
* **Window\.localStorage (Extension or Active Tab context)**: Stores data in the local storage of the web pages. Accessible by scripts on the same page from the same domain.
* **Chrome.storage.local**: Stores data locally in the user's Chrome browser. Data is accessible by any part of the extension, regardless of the active page.
* **Chrome.storage.sync**: Stores data in Chrome and synchronizes across all instances of Chrome where the user is logged in with the same Google account.
**Choosing the Storage Context**
When setting up 'Charles: Chrome Storage' in your Bubble app, select from the following contexts in the dropdown menu:
* **Extension**: Utilizes the extension's isolated storage, accessible from any tab.
* **ActiveTab**: Operates within the local storage of the currently active Chrome tab.
* **ChromeStorageLocal**: Uses chrome.storage.local, preserving data across browser sessions without syncing across devices.
* **ChromeStorageSync**: Uses chrome.storage.sync, ideal for syncing data across all devices where the user’s Chrome is logged in.
**Workflow Actions**
You can manage data using these actions:
* **Charles: Write to Storage**: Saves data to the selected storage context.
* **Charles: Read from Storage**: Retrieves data from the selected storage context.
* **Charles: Delete from Storage**: Removes specific data from the selected storage context.
* **Charles: Clear Storage**: Clears all data from the selected storage context.
**Handling Events**
Upon using 'Charles: Read from Storage', the event 'Charles: Storage Variable Read' triggers, and you can access:
* **Variable Name**: Name of the retrieved variable.
* **Variable Value**: Value of the retrieved variable.
**Storage Comparison**
* **Accessibility**: While Window\.localStorage is accessible only within the context of the same domain and page, both chrome.storage.local and chrome.storage.sync are accessible across all parts of the extension.
* **Persistence**: Window\.localStorage data persists only locally, whereas chrome.storage.local data is also local but accessible extension-wide. Chrome.storage.sync data syncs across all devices logged into Chrome.
* **Capacity**: Local storage typically offers up to 5MB per domain, whereas chrome.storage.local provides more, and chrome.storage.sync offers sync capabilities but with limited capacity per item.
* **API Type**: Window\.localStorage uses a synchronous API, which can block operations, whereas both chrome.storage options provide an asynchronous API, improving performance for operations involving large data or requiring background processing.
**Usage**
{% hint style="info" %}
Please make sure you use the Charles Chrome Extension v2.5.0 source code and 1.170 plugin version or later.
{% endhint %}
1. Add the Charles: Chrome storage element to your Bubble app
2. Use the workflow actions:
1. Charles: Write to local storage
2. Charles: readFromLocalStorage
3. Charles: deleteFromLocalStorage
4. Charles: clearLocalStorage
Select the context as per the guide above
3. After using ‘Charles: readFromLocalStorage’, an event ‘Charles:Chromestorage A Local variable is read’ will be triggered. You can access the results in the ‘Charles: Chrome storage’ - Element’s states ‘Variable name’ and ‘Variable value’
{% hint style="info" %}
If you have different workflows for different keys, you can use a condition (i.e. only when variable name equals xy..)
{% endhint %}
