76
55

More than 5 years have passed since last update.

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

Posted at

はじめに

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

76
55
2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
76
55