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

Please make sure you use the Charles Chrome Extension v2.5.0 source code and 1.170 plugin version or later.

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’

If you have different workflows for different keys, you can use a condition (i.e. only when variable name equals xy..)