はじめに
ローカル環境で動作する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を保存します。
保存方法
chrome.storage.local.set({'key': value}, function () {
});
取り出し方法
任意のkeyの対になる値をvalueとして返します。
chrome.storage.local.get("key", function (value) {
var value_data = value.key;
});
複数のkeyを渡して、複数のvalueを得る場合は、keyをブラケットで囲いましょう
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に変更するだけです。
chrome.storage.sync.set({'key': value}, function () {
});
まとめ
1台で完結するchrome-extensionを作成したので、sync 機能を活かしていませんが、
ブラウザ上でのクッキーの削除からデータが消えないのは嬉しいですね。
大きな枠組としては、localstorageと機能は類似しているので、動作させる環境によって選択すればいいのではないかと。
(localstorageを2012年にいじった時に、クッキー削除のタイミングで保持したデータも消されたのですが、今はもしかしたら仕様が変わっているかもしれません...未調査です。)