はじめに

ローカル環境で動作するchrome extensionを作った際に利用した、
chrome内のデータストレージである chrome storage についてのご紹介。
入力された文字データを残していく記録用途で使いました。

chrome.storageとは？

箇条書きになりますが...
- chromeにkey-value形式でデータを保存することができる
- オプションから"単体運用(local)" or "chromeアカウントと同期(sync)"が選択可能
- 保存データ量は、基本的に5Mib。ただし"単体運用(local)"を選択時のみ、無限にするオプション有り。
- developer.chromeのAPIとサンプルを見る限り、chrome-extension上で動作させることをベースとしている?
- -> 特に"chromeアカウントと同期(sync)"を利用する場合は、chrome-extension前提となっている

API一覧は、developer.chromeに網羅されています。
developer.chrome site

webstorageとの違いは？

基本的にchrome上でしか動作しないので、専用環境(chromeアプリ等)で動作させる
クッキーやキャッシュを削除しても、保存したデータが保持される
string型以外でもvalueに挿入可能

他にも違いがあるのでしょうが、使ってみた感覚ではこんな感想ですね...

使い方 (local)

単体運用(local)でのサンプルコードです。
指定したkeyに対して、任意のvalueを保存します。

保存方法

chromestorage_local_set.js

chrome.storage.local.set({'key': value}, function () {
});

取り出し方法

任意のkeyの対になる値をvalueとして返します。

chrome_storage_local_get_1.js

chrome.storage.local.get("key", function (value) {
  var value_data = value.key;
});

複数のkeyを渡して、複数のvalueを得る場合は、keyをブラケットで囲いましょう

chrome_storage_local_get_2.js

chrome.storage.local.get(["key1", "key2", "key3"], function (value) {
  var value_data_1 = value.key1;
  var value_data_2 = value.key2;
  var value_data_3 = value.key3;
});

使い方 (sync)

基本的に、前項でlocalと指定していた箇所をsyncに変更するだけです。

chromestorage_sync_set.js

chrome.storage.sync.set({'key': value}, function () {
});

まとめ

1台で完結するchrome-extensionを作成したので、sync 機能を活かしていませんが、
ブラウザ上でのクッキーの削除からデータが消えないのは嬉しいですね。
大きな枠組としては、localstorageと機能は類似しているので、動作させる環境によって選択すればいいのではないかと。

(localstorageを2012年にいじった時に、クッキー削除のタイミングで保持したデータも消されたのですが、今はもしかしたら仕様が変わっているかもしれません...未調査です。)

chrome.storage を利用したchromeへのデータ保存