在Vue.js组件中使用Chrome浏览器扩展API组件

我试图访问我的vue.js组件中chrome浏览器的Chrome扩展的本地存储。在Vue.js组件中使用Chrome浏览器扩展API组件

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手动不告诉我任何事情：

因此我假设数据在我的浏览器无法persistet浏览器吗？

有没有人知道我能如何让这个工作？或者给我一个提示？

来源

2017-06-12 xetra11

'localStorage'不是chrome.storage.local保存数据的地方。请参阅[文档]（https://developer.chrome.com/extensions/storage）。另外要注意后者是异步的。 – wOxxOm

相关：[window.localStorage vs chrome.storage.local]（https://stackoverflow.com/q/24279495） – Makyen

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

localStorage.getItem("myvar");

删除项目像

localStorage.removeItem("myvar");

您可以访问使用localStorage.myvar这个变量通过这样做，

localStorage.myvar = "This is an example";

或

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

你可以得到项目。希望它有帮助

来源

2017-06-12 09:46:26 Kumar

感谢您的澄清。我终于发现问题存在于chromes storage api同步 – xetra11

存储API将数据存储为JSON字符串，而不是对象。这就是为什么存储*必须是JSON的原因。 – Makyen

'存储API可以存储为对象'在这里https://developer.chrome.com/extensions/storage – Kumar

在Vue.js组件中使用Chrome浏览器扩展API组件

回答

相关问题