为何Google Chrome扩展弹窗页设置localStorage值后在DevTools中查不到

你找不到已存的username键，本质是把两套完全独立的浏览器存储体系搞混了，查值的位置完全错了，具体差异点：

• 代码里调用的chrome.storage.local，是Chrome扩展专属的存储API，数据存在Chrome给扩展单独划分的专属存储分区，和同页面下的原生Web存储完全物理隔离
• 你在弹窗DevTools里翻找的位置，是浏览器原生localStorage的查看面板：这个面板只展示当前页面源下，通过localStorage.setItem这类原生API写入的键值对，根本不会读取chrome.storage里存的内容
• 你写的存储逻辑本身是能正常执行的，不存在调用失败的问题，只是没找对查看的地方而已

根据你的实际存储需求，分两种场景处理：

场景1：坚持使用chrome.storage.local存值（扩展开发推荐方案） #

• 存值的代码逻辑不需要改动，只需要换正确的查看入口：打开弹窗DevTools，切换到「Application」标签，左侧导航栏找到「Extension Storage」分类，展开后选中你当前正在调试的扩展条目，下面的Storage节点就是chrome.storage.local的完整存储内容，你写入的username键就展示在这里
• 业务代码读取值时，直接调用chrome.storage.local.get('username', (res) => { console.log(res.username) })就能正常拿到存好的数据，完全不受弹窗开关、页面跳转的影响，还能和扩展的后台Service Worker、内容脚本共享同一份存储

场景2：需要把值存在DevTools Local Storage面板可查的原生localStorage里 #

• 把原来调用chrome.storage的逻辑替换成原生localStorage API即可，修改后的代码示例：

methods: {
  saveConfig() {
    // 替换chrome.storage.local.set为原生localStorage写入
    localStorage.setItem('username', 'd')
    chrome.tabs.create({
      url: 'chrome://extensions/shortcuts'
    });
    Message("dd");
  }
}

• 注意原生localStorage的局限性：这份存储只能被弹窗页面本身读写，扩展的后台脚本、注入到网页里的内容脚本都无法访问这份数据，仅适合存弹窗页自身的临时配置。

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