monoの開発ブログ

ChromeのStorageモジュールで大規模データを扱う

今まで Chrome の拡張で 5MB を超えるデータを扱おうとすると、オワコン Web SQL Database かなかなか仕様の固まらない IndexedDB を使うしかなかったのですが、いつの間にか chrome.storage モジュールが追加されていたので試してみました。

ストレージの種類

chrome.storage モジュールでは sync, managed, local の3種類のストレージが用意されています。sync はChrome Syncで同期できるストレージで、managed は管理者のみが値を書き込めるストレージ、local はローカルにデータを保存するストレージです。sync は容量や書き込み頻度の制限が厳しく、managed は自由に書き込みできないので、大容量のデータを保存する場合には local を利用します。

パーミッション

chrome.storage モジュールを使うためには storage パーミッションが必要です。local ストレージで5MBを超えるデータを格納する場合には unlimitedStorage パーミッションも必要です。

{
  ...
  "permissions": [
    "storage",
    "unlimitedStorage"
  ],
  ...
}

利用方法

以下に利用方法の例を示します。localStorage などと違って値が文字列に限定されていないので、いちいち JSON を使う必要がないのは楽ですね。全部非同期なのでだるいですが。

書き込み

var items = { 'value': 123 };

chrome.storage.local.set(items, function() {
  if(chrome.extension.lastError !== undefined) {
    // failure
  }
  else {
    // success
  }
});

読み込み

var keys = [ 'value' ];

chrome.storage.local.get(keys, function(items) {
  if(chrome.extension.lastError !== undefined) {
    // failure
  }
  else {
    // success
    console.log(items.value);
  }
});

削除

var keys = [ 'value' ];

chrome.storage.local.remove(keys, function() {
  if(chrome.extension.lastError !== undefined) {
    // failure
  }
  else {
    // success
  }
});

全削除

chrome.storage.local.clear(function() {
  if(chrome.extension.lastError !== undefined) {
    // failure
  }
  else {
    // success
  }
});

参考