Vue.js内でChrome拡張APIを使用するコンポーネント

Question

私はvue.jsコンポーネント内のクロムブラウザのローカルストレージにアクセスしようとしています。

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されていないデータを想定ブラウザ？

どのように私はこれを動作させることができます知っていますか？または私にヒントを与えますか？

Answer 1

Chrome.storage APIとlocalStorage APIはどちらも異なります。 Chrome.storage APIは、拡張機能の特定のストレージニーズを満たすように最適化されています。これは、localStorage APIと同じストレージ機能を提供します。この2つの間には、storage APIがオブジェクトとして格納できるストリング内のデータを格納するlocalStorage APIと、バルクの読み書き操作とは非同期なので、localStorage APIよりも高速です。あなたがlocalStorage APIに保存したい場合。あなたはlocalStorage.myvarを使用してこの変数にアクセスすることができます

localStorage.removeItem("myvar"); 

のような項目を削除するには、

localStorage.getItem("myvar"); 

でアイテムを取得することができます

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

による

localStorage.myvar = "This is an example"; 

または

を行うことができます。希望すると助かります