# 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 %}

<div align="left"><figure><img src="/files/t8eSDp1LAAf8VmDRJzwW" alt=""><figcaption></figcaption></figure></div>

<div align="left"><figure><img src="/files/Tx8bL0Z99LZjjJKHcylk" alt=""><figcaption></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://cranford-tech.gitbook.io/charles/key-features/save-to-chrome-storage.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.