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

#はじめに
ローカル環境で動作する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年にいじった時に、クッキー削除のタイミングで保持したデータも消されたのですが、今はもしかしたら仕様が変わっているかもしれません...未調査です。)