Use chrome.storage local storage in chrome extension plug-in development

1. Description

Local storage of data in extensions can  chrome.storage be realized through API, which is different from localstorage in web in some respects, chrome.storage has been optimized.

The difference with localStorage:

• User data can be automatically synchronized with chrome (via storage.sync), as long as the user logs in to the chrome account, the browser can be fully synchronized
• The extension's script can directly access the user's data without going through background js
• Preserve user's extension settings even with split incognito behavior
• Asynchronous batch read and write operations, faster than blocking and serial localStorage
• User data can store objects (localStorage is to string objects into strings)
• Can read the enterprise policy configured by the administrator for the extension (use storage.managed with schema as schema)

2. Permission application

If you want to use chrome.storage, you need to apply for permissions in the manifest:

3. The use of local and sync is different

When using storage.sync, if the user has sync enabled, stored data will automatically sync to any Chrome browser the user is logged into.

Chrome stores data locally when Chrome is offline. Chrome will sync the data the next time the browser is online. storage.sync will still work even if the user disables sync. In this case it behaves the same as storage.local.

storage.managed is read-only

Storage is unencrypted and confidential information cannot be stored

1、chrome.storage.sync

If you need to synchronize the stored content to all chrome browsers logged in with the same account, you can use  chrome.storage.sync:

// popup.js
button.onclick = () => {
    chrome.storage.sync.set({key: 'value11'}, () => {
        console.log('set successed!');
    });
}

button2.onclick = () => {
    chrome.storage.sync.get('key', (res) => {
        console.log(res);
    });
}

 The result display:

 

 

2、chrome.storage.local

button3.onclick = () => {
    chrome.storage.local.set({key: "value local"}, function() {
        console.log('Value is set to ' + value);
    });

    chrome.storage.local.get(['key'], function(result) {
        console.log('Value currently is ' + result.key);
    });
}

The result display:

 

 

4. Storage Limits

The storage of chrome.storage is limited, similar to a pipeline.

When the pipe is full, it will be queued, so it may not be possible to continue storing.

5. Usage examples and storage object change monitoring

After the storage content is changed, the event can be monitored. For example, I made the following storage.

    const text = textarea.value;
    chrome.storage.local.set({'textValue': text}, function() {
        console.log('Value is ' + text);
    });

It can be monitored by:

chrome.storage.onChanged.addListener(function(changes, namespace) {
        for (var key in changes) {
          var storageChange = changes[key];
          console.log('Storage key "%s" in namespace "%s" changed. ' +
                      'Old value was "%s", new value is "%s".',
                      key,
                      namespace,
                      storageChange.oldValue,
                      storageChange.newValue);
        }
      });

6. API example

set and get already exist above, do not repeat

Both remove and get methods support a single parameter or an array of parameters

1、remove

button6.onclick = () => {
    chrome.storage.local.remove('textValue', function() {
        console.log('remove ');
    });
}

2、clear

button7.onclick = () => {
    chrome.storage.local.clear(function() {
        console.log('remove all ');
    });
}