Web前端►Extension►WebExtension

browser.storage.local

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/11/browser-storage-local/

摘要

本文主要讲述了：

  1. 作用
  2. 许可配置
  3. 容量上限
  4. 方法
  5. 事件

正文

作用

在background.scripts和 ContentScripts 中读写本地缓存

默认情况下，只有在扩展或浏览器被用户卸载的时候，browser.storage.local缓存的数据才会被销毁。

许可配置

  • storage

容量上限

  • Chrome 限制了5MB的存储空间，如果需要更大的空间，需要申请unlimitedStorage许可
  • Firefox 目前没有限制存储空间的大小，但如果需要存储大量数据，建议申请unlimitedStorage许可

方法

browser.storage.local.set()

注意：只能存储原始类型和数组。

示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
browser.storage.local
  .set({
    author: 'jsweibo',
    age: 18,
    isMale: true,
    hobbies: [1, 2, 3, 4],
  })
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

browser.storage.local.get()

get()的参数是被查询数据的名称。

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .get('author')
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

查询多个数据时，以字符串数组的形式传递参数。

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .get(['author', 'age'])
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

当需要指定默认值时，以对象的形式传递参数。

示例：

1
2
3
4
5
6
7
8
9
10
browser.storage.local
  .get({
    yourName: 'guest',
  })
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

当get()的参数是null或undefined时，视作查询缓存中的所有数据。

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .get()
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

browser.storage.local.remove()

删除缓存

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .remove('age')
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

删除多个缓存

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .remove(['age', 'author'])
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

browser.storage.local.clear()

清空缓存

示例：

1
2
3
4
5
6
7
8
browser.storage.local
  .clear()
  .then((res) => {
    console.log(res);
  })
  .catch((error) => {
    console.log(error);
  });

事件

onChanged

注：

  1. 当browser.storage.local中缓存的数据发生变更时，会触发browser.storage的changed事件
  2. 使用browser.storage.local.remove()或browser.storage.local.clear()清空缓存时，会触发browser.storage的changed事件，但不存在newValue

示例：

1
2
3
4
browser.storage.onChanged.addListener(function (changes, areaName) {
  console.log(changes);
  console.log(areaName);
});

参考资料

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2019/02/11/browser-storage-local/

本文对你有帮助？请支持我

支付宝
微信