Chrome扩展中localStorage的存储特性及全局存储方案咨询

一、Chrome扩展内localStorage的作用范围 #

Chrome扩展里的localStorage并非全局共享，它的生效范围完全取决于代码运行的上下文：

• 若在内容脚本中调用localStorage.setItem('foo', 'bar')，这个foo会被存在当前访问网站的域名对应localStorage中——只有该网站的页面/内容脚本能访问到它。
• 若在扩展后台脚本（Service Worker）、弹出页面（Popup）、选项页面中调用localStorage，存储的数据属于扩展自身，和任何网站的localStorage完全隔离，仅扩展内部的页面/脚本可访问。

二、多网站是否会生成多个foo？ #

没错，如果是在内容脚本中执行localStorage.setItem('foo', 'bar')，每个被注入内容脚本的网站都会在自己的localStorage里创建独立的foo条目，互相完全隔离。比如访问A网站时存的foo，和访问B网站时存的foo是两个毫无关联的存储项，彼此无法读取对方的数据。

三、实现全局存储foo的方法 #

如果想让foo在扩展的所有上下文（内容脚本、后台、Popup等）中共享，或者避免和网站存储混淆，推荐使用Chrome扩展提供的专用存储API：

• chrome.storage.local：属于扩展的本地存储，所有扩展上下文均可访问，数据与网站完全隔离，不会随网站切换变化。用法示例：

  // 存储数据
  chrome.storage.local.set({foo: 'bar'}, () => {
    console.log('数据已存储');
  });
  
  // 获取数据
  chrome.storage.local.get('foo', (result) => {
    console.log(result.foo); // 输出 'bar'
  });
  

• chrome.storage.sync：功能与local类似，但会自动同步到用户登录的其他Chrome设备（需用户开启同步功能），适合跨设备共享的配置类数据。

注意：使用chrome.storage需要在扩展的manifest.json中声明"storage"权限。

内容的提问来源于stack exchange，提问作者anjanesh