chrome拓展插件开发中使用chrome.storage本地存储

港控/mmm° 2023-10-04 20:21 60阅读 0赞

### 一、描述 ###

在扩展程序中本地存储数据可以通过 `chrome.storage` API 实现，和 web 中的 localstorage 在某些方面是有区别的，chrome.storage 已经做了优化。

与 localStorage 的区别：

*  用户数据可以与 chrome 自动同步（通过 storage.sync）,只要用户登录了 chrome 账号，则能够全量同步浏览器
 *  扩展程序的脚本能够直接访问用户的数据，不需要通过 background js
 *  即使使用 split 隐身行为，也可以保留用户的扩展程序设置
 *  异步批量读写操作，比阻塞和串行的 localStorage 更快
 *  用户数据可以存储对象（localStorage 是将对象 string 到字符串中）
 *  可以读取管理员为扩展配置的企业策略（使用带有模式的 storage.managed 做 schema）

### 二、权限申请 ###

如果要使用 chrome.storage 则需要在 manifest 的 permissions 申请：

![acf60546072f4487ac7f9ea9a04d06ed.png][]

### 三、local 与 sync 的使用不同 ###

使用 storage.sync 时，如果用户启用了同步，则存储的数据将自动同步到用户登录的任何 Chrome 浏览器。

当 Chrome 处于离线状态时，Chrome 会在本地存储数据。下次浏览器在线时，Chrome 会同步数据。即使用户禁用同步，storage.sync 仍然可以工作。在这种情况下，它的行为与 storage.local 相同。

storage.managed 是只读的

存储是未加密的，不能存储机密信息

#### 1、chrome.storage.sync ####

如果需要将存储的内容同步到所有登录了同一账号的 chrome 浏览器中，可以通过 `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);
        });
    }

结果展示：

![ab9c82ed28bf4a028c63e05b4af6bf0c.png][]

![9af93974b4ea4d959a95b23226ed74ee.png][]

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);
        });
    }

结果展示：

![0a997a27ad56cbbbbaf7065cb89160e4.jpeg][]

### 四、存储限制 ###

chrome.storage 的存储是有限制的，类似一个管道。

当管道满了之后，就会排队，因此可能无法继续存储。

### 五、使用示例及存储对象变更监听 ###

存储内容变更之后，是能够监听到事件的，比如我做了下面的存储。

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

可以通过如下监听：

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);
            }
          });

#### 六、API 示例 ####

set 和 get 上面已经有了，不重复

remove 和 get 两个方法均支持 单个参数或者是数组形式的参数

#### 1、remove ####

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

![52a640f989685e86fdb232fc5e2d84ba.jpeg][]

#### 2、clear ####

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

![9149857237580df97c90f0ea8e8e3c6f.jpeg][]

[acf60546072f4487ac7f9ea9a04d06ed.png]: https://img-blog.csdnimg.cn/acf60546072f4487ac7f9ea9a04d06ed.png
[ab9c82ed28bf4a028c63e05b4af6bf0c.png]: https://img-blog.csdnimg.cn/ab9c82ed28bf4a028c63e05b4af6bf0c.png
[9af93974b4ea4d959a95b23226ed74ee.png]: https://img-blog.csdnimg.cn/9af93974b4ea4d959a95b23226ed74ee.png
[0a997a27ad56cbbbbaf7065cb89160e4.jpeg]: https://img-blog.csdnimg.cn/img_convert/0a997a27ad56cbbbbaf7065cb89160e4.jpeg
[52a640f989685e86fdb232fc5e2d84ba.jpeg]: https://img-blog.csdnimg.cn/img_convert/52a640f989685e86fdb232fc5e2d84ba.jpeg
[9149857237580df97c90f0ea8e8e3c6f.jpeg]: https://img-blog.csdnimg.cn/img_convert/9149857237580df97c90f0ea8e8e3c6f.jpeg