Posted at

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

More than 3 years have passed since last update.


はじめに

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