Question

我试图访问我的vue.js组件中的Chrome浏览器的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访问此变量。希望它有所帮助

Answer 2

// 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), "*");

在Vue.js组件中使用Chrome扩展程序API

2 个答案: