谈谈 Chrome 插件中的 Storage

Chrome 的 Storage 有点类似于 HTML5 的 localStorage,最初我没有注意到这个 API 的时候也是用 localStorage 存储的,但是它可以通过 storage.sync 使用浏览器自带的自动同步,在禁用 localStorage 的隐身模式,storage.sync 也能够正常的使用,此外它是异步操作,因此比阻塞和串行化的 localStorage 更快,用户的数据也能够存储为 String 以外的类型。

当然由于历史原因(需要将过去的配置进行兼容迁移),我这里还是没有直接存储对象,而是处理成字符串存储。(因为在 localStorage 中存储的就是这样,挨个处理太麻烦了 /w)

既然如此,我们在使用前其实就要考虑一点问题:网速慢的情况下我取不到 storage.sync,会不会造成载入缓慢的情况,毕竟实际上我还是需要把异步改成同步操作来进行处理的,如果链接耗时过大,那么会对我造成许许多多的困扰和麻烦。

在文档中也只说明了:

如果要为您的扩展程序储存用户数据,您可以使用 storage.syncstorage.local。使用 storage.sync 时,储存的数据将会自动在用户启用同步功能并已经登录的所有 Chrome 浏览器间同步。
当 Chrome 浏览器处于离线状态时,Chrome 浏览器将数据储存在本地。下一次浏览器在线时,Chrome 浏览器将会同步数据。即使用户关闭了同步,storage.sync 仍然有效,只是此时它与 storage.local 的行为相同。

最初我尝试在 localStorage 和 storage.sync 一式两份的进行存储,后来经过试验发现在各种网络环境下,storage.sync 都是没有什么使用负担的,可以轻松愉快的使用,因为实际上他不是在调用后去请求,而是在浏览器 / 插件开启时就已经同步好了。

chrome.storage.sync.set({'test': '123'})
chrome.storage.sync.get('test', object => console.log(object))
// { test: '123' } 好用,而且非常快

除此以外,我们还要注意的是 sync 的限制,这一点非常重要,和 localStorage 的随意使用不同的是,对于单个 Key 最多只能存储 8192 Bytes,而最多存储 512 项数据,对于每小时写入次数和每十分钟的写次数亦有限制。

最后,如果需要追踪变更,提供了一个 onChanged 的事件监听,使用方法也很简单:

 chrome.storage.onChanged.addListener(function(changes, namespace) {
   for (key in changes) {
     var storageChange = changes[key];
     console.log('存储键“%s”(位于“%s”命名空间中)已更改。' +
                     '原来的值为“%s”,新的值为“%s”。',
                 key,
                 namespace,
                 storageChange.oldValue,
                 storageChange.newValue);
   }
 });

文档参考:

植入部分

如果您觉得文章不错,可以通过赞助支持我。

如果您不希望打赏,也可以通过关闭广告屏蔽插件的形式帮助网站运作。

标签: 知识, 代码段, 使用

添加新评论