javascript - 在 Vue.js 组件中使用 Chrome 扩展 API

Question

我正在尝试访问 chrome 扩展程序的本地存储，即我的 vue.js 组件中的 chrome 浏览器。

ServerList.vue

    <template>
      <div>
        <server-list :server-descriptions="serverDescriptions"/>
      </div>
    </template>

    <script>
      import ServerList from "./ServerList.vue"

      chrome.storage.sync.set({'foo': 'hello', 'bar': 'hi'}, function() {
        console.log('Settings saved');
      });

      chrome.storage.sync.get(['foo', 'bar'], function(items) {
        console.log('Settings retrieved', items);
      });
    [...]

   </script>

此代码位于我的 popup.html 中，这就是 popup.html 检查的控制台告诉我的内容:

因此我认为它确实有效。但是当我通过调试器选项卡检查本地存储时，我什么也没看到:

即使在控制台中手动检查 localStorage 也不会向我显示任何内容:

因此我假设数据未持久保存在我的 Chrome 浏览器中？

有人知道我怎样才能让它工作吗？或者给我一个提示？

Answer 1

Chrome.storage api 和 localStorage api 都是不同的东西。 Chrome.storage api 已经过优化，可以满足扩展程序的特定存储需求。它提供与 localStorage API 相同的存储功能。这两者之间有很多区别，例如 localStorage API 将数据存储在字符串中，而存储 api 可以存储为对象，并且它与批量读写操作异步，因此它比 localStorage api 更快。如果你想存储在localStorage api中。你可以这样做，

localStorage.myvar = "This is an example";

或

localStorage.setItem("myvar", "This is an example");

您可以通过以下方式获取元素

localStorage.getItem("myvar");

删除类似的项目

localStorage.removeItem("myvar");

您可以使用localStorage.myvar访问此变量。希望对您有帮助