在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組件

回答

相關問題