web-dev-qa-db-ja.com

window.localStorage vs chrome.storage.local

私はChrome拡張機能を開発しています。データを保存してから、ある時点で取得する必要があります。availablestoragesに遭遇しました：window.localStorageおよびchrome.storage.local。

だから私の質問は、どちらがChrome拡張機能で使用する正しい選択であるかです：
window.localStorageまたはchrome.storage.local？

PS。browser actionを使用して、HTMLのローカルIFRAMEをロードしています。だから私はpopup.jsを使用していません。

javascriptgoogle-chrome-extensionlocal-storagegoogle-chrome-storage
38
Karlen Kishmiryan

それはあなたのChrome拡張機能が何をするかによって完全に異なります。window.localStorageはHTML5ストレージです。バックグラウンドページで実行している場合を除き、データの取得と設定のみが可能です。特定のドメインのストレージ：WebページのlocalStorageを使用するため、これはDOMに挿入されたコードにも当てはまります。

つまり、chrome：//があるため、Webページとは独立して動作するバックグラウンドページでlocalStorageを使用しない限り、異なるWebページ間でデータを共有することはできません。ドメインとしてのURI

一方、chrome.storage.localは、Chrome ExtensionsおよびChromeアプリがデータをより中央の場所に保存するために設計されています。可能性の1つは、バックグラウンドページがデータの設定と取得を処理し、コンテンツスクリプトがWebページの変更と対話を処理することです。

ただし、これらのAPIはコンテンツスクリプトでも機能し、私が書いた拡張機能は両方とも、コンテンツスクリプトから呼び出されたchrome.storage.localを使用します。

例として、実際に読むまでStack Exchangeに受信トレイアイテムを保持するStack Appを作成しました。これは StackInbox と呼ばれます。 Stack Exchangeサイトは数百のドメインにまたがっているので、ユーザーのaccountIdを保存してすべてのサイトで再利用できるため、chrome.storage.localを選択しました。これにより、受信トレイデータが同期され、コンテンツスクリプトで直接使用できます。

簡単なテストとして、コンテンツスクリプトの1つのドメインのlocalStorageにデータを配置し、別のドメインからそれをプルしようとすると、データがそこにないことがわかります。 chrome.storage.localでは、これは問題ではありません。

最後に、Chrome拡張機能とChromeアプリはホワイトリストに登録されます。ユーザーがインストールを選択したため、通常は通常のウェブサイトよりも多くのことができます。 、マニフェストで「unlimitedStorage」権限を指定することにより、HTML5 localStorageに設定された5MBの制限をはるかに超えてデータを保存できます。

詳細については、 GoogleのドキュメントChrome Storage をご覧ください。

43
jmort253

localStorage

長所：

  • 同期的で、作業が簡単です：_var value = localStorage[key]_
  • 開発ツールでのサポート：Resources> Local Storageto view and modify.

短所：

  • 文字列のみを保存するため、データを自分でシリアル化する必要があります。つまり、_JSON.stringify_
  • コンテンツスクリプトからアクセスできない（または、コンテキストスクリプトは拡張機能ではなくページと共有する）ため、メッセージングに依存して値を渡す必要があります。
  • 同時実行中の拡張ページ間で同期および共有されるため、同期の問題が発生する可能性があります。

_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)を呼び出してすべての値を取得するか、 Storage Area Explorer のようなものを使用する必要があります。

_chrome.storage.sync_

上記と同じですが、次のとおりです。

長所：

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

短所：

  • 柔軟性のないクォータ データサイズと更新頻度。

  • 2016年11月6日現在、 firefox WebExtensionsではまだサポートされていません またはEdge Extensionsなので、ポータブルではありません。

    注：_storage.sync_は FF WebExtension互換 になりましたが、ChromeとFFを相互にネイティブに同期させる方法はありません。

59
Xan