Help us understand the problem. What is going on with this article?

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

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away