window.localStorage と chrome.storage.local 質問する

window.localStorage と chrome.storage.local 質問する

Chrome拡張機能を開発しており、データを保存して、ある時点で取得する必要があります。調査したところ、利用可能 storageおよび に遭遇しましたwindow.localStoragechrome.storage.local

そこで質問なのですが、Chrome 拡張機能ではどれを使うのが正しい選択なのでしょうか。
window.localStorageまたはchrome.storage.local?

追伸browser actionローカルHTMLを にロードするためにを使用していますIFRAME。したがって、 は使用していませんpopup.js

ベストアンサー1

localStorage

長所:

  • 同期されているため、作業が簡単になります。var value = localStorage[key]
  • 開発ツールでサポートされています:リソース > ローカルストレージ表示および変更します。

短所:

  • 文字列のみを格納するため、データを自分でシリアル化する必要があります。JSON.stringify
  • コンテンツ スクリプトからはアクセスできません (正確には、コンテキスト スクリプトは拡張機能ではなくページと共有します)。そのため、値を渡すにはメッセージングに依存する必要があります。
  • 同時に実行される拡張ページ間で同期 AND 共有が行われるため、同期の問題が発生する可能性があります。

chrome.storage.local

長所:

  • JSON 互換データを自動的にシリアル化し、追加の定型句なしで非文字列を保存できます。
  • コンテンツ スクリプト内で完全に利用可能です。
  • 変更を通知するイベントをサポートします:chrome.storage.onChanged
  • 許可があれば"unlimitedStorage"、任意の量のデータを保持できます。
  • デフォルト値のための優れた組み込みメカニズムがあります:

    chrome.storage.local.get({key: defaultValue}, function(value){/*...*/});
    
  • Firefox WebExtensions および Edge Extensions で完全にサポートされています。

短所:

  • 非同期なので、扱いが少し難しくなります。

    chrome.storage.local.get("key", function(value){/* Continue here */});
    
  • 開発ツールでは視覚化されません。chrome.storage.local.get(null)すべての値を取得するには、次のように呼び出すか、次のように使用する必要があります。ストレージエリアエクスプローラー

chrome.storage.sync

上記と同じですが、次の点が異なります。

長所:

  • 拡張機能の同期が有効になっている場合、ログインした Chrome インスタンス間で自動的に同期されます。

短所:

  • 柔軟性のない割り当てデータサイズと更新頻度に基づきます。
  • 2016年11月6日現在、 Firefox WebExtensionsではまだサポートされていません または Edge Extensions なので、移植性はありません。

    注:storage.sync現在FF WebExtension対応ただし、Chrome と FF をネイティブに同期させる方法はありません。

おすすめ記事