1

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

服务器列表.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 浏览器中的持久化数据？

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

4

2 回答 2

1

Chrome.storage api 和 localStorage api 都是不同的东西。Chrome.storage api 已经过优化以满足扩展程序的特定存储需求。它提供与 localStorage API 相同的存储功能。这两者之间有很多区别，例如 localStorage API 将数据存储在字符串中，而 storage 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. 希望能帮助到你

于 2017-06-12T09:46:26.677 回答
0 
// popup.html
window.addEventListener("message", function (event) 
{
// We only accept messages from ourselves
  if (event.source != window) return;

  if(event.data != "")
  {
    var data = JSON.parse(event.data);

    if (data.type == 'STORE_DATA') 
    {
        chrome.storage.sync.set(data, function() 
        {
            console.log('Settings saved');
        });
    }
  }
});


// ServerList.vue

let data = {'foo': 'hello', 'bar': 'hi'}

let type = { type: "STORE_DATA" , data :data };
    
window.postMessage(JSON.stringify(type), "*");
于 2020-12-08T07:17:10.233 回答