tande lab.

[Chrome] ローカルストレージを利用する

Chrome Extension の開発に便利なローカルストレージ機能。
JavaScript のデータをブラウザに保存でき、ブラウザを閉じても保持される、というもの。

なのでユーザが任意に設定した値を保存しておく、といったような用途に利用できます。

HTML5 の機能 Web Storage の一種で、クッキーの代替になるもののようです。

Web Storage とか 対応ブラウザなどの話は、
連載:人気順に説明する初めてのHTML5開発:ブラウザでストレージ? Web Storageを使いこなそう (1/3) – @IT
のサイトが詳しいです。

以下、使い方です。

使い方

"localStorage" というオブジェクトが、グローバル変数としてすでに用意されています。
この "localStorage" というオブジェクトにプロパティと値を保存するだけで利用できます。

この変数には基本、文字列しか保存できません。

以下、サンプルです。
HTML で保存して、ブラウザの JavaScript コンソールで見ると動きが確認できます。

<script>
	// key "suntory" に、値 "プレミアムモルツ" というように対応づけて保存
	localStorage.suntory = "プレミアムモルツ";
	localStorage.kirin = "一番絞り";
	localStorage.asahi = "スーパードライ";
	localStorage.sapporo = "黒ラベル";
	localStorage.setItem("orion","オリオンビール"); //こういう書き方もできる

	// ローカルストレージに格納されてる値の数を表示
	console.log("// ローカルストレージに格納されてる値の数を表示");
	console.log(localStorage.length);

	// ローカルストレージ "suntory" の値を表示(プロパティアクセス)
	console.log("// ローカルストレージ 'suntory' の値を表示(プロパティアクセス)");
	console.log(localStorage.suntory);

	// ローカルストレージ "suntory" の値を表示(メソッドアクセス)
	console.log("// ローカルストレージ 'kirin' の値を表示(メソッドアクセス)");
	console.log(localStorage.getItem("kirin"));

	// ローカルストレージの 0番めの key を表示
	// keyは、追加した順ではなくアルファベット順で格納されている模様
	console.log("// ローカルストレージの 0 番めの key を表示");
	console.log(localStorage.key(0)); // asahi

  	// ローカルストレージに格納されてる key を一覧表示
	// keyは、追加した順ではなくアルファベット順で格納されている模様
	console.log("// ローカルストレージに格納されてる key を一覧表示");
	for(var i = 0; i < localStorage.length; i++) {
    	console.log(localStorage.key(i)); 
  	}

  	// ローカルストレージに格納されてる 値 を一覧表示
  	// アルファベット順にソートされた key の順番で表示される 
  	console.log("// ローカルストレージに格納されてる 値 を一覧表示");
  	for(var j in localStorage) {
    	console.log(localStorage[j]); 
  	}

  	// key は for in 文ではなぜか表示できない
  	// 値 は for i++ 文ではなぜか表示できない
  	// なぜだー! chrome だけ?

  	// ローカルストレージの "suntory" の値を消去
  	localStorage.removeItem("suntory");

  	// ローカルストレージに格納されてる値の数を表示
	console.log("// ローカルストレージに格納されてる値の数を表示");
	console.log(localStorage.length);

  	// ローカルストレージの値を全て消去
  	// clear するとブラウザに保存されない
  	localStorage.clear();

  	// ローカルストレージに格納されてる値の数を表示
	console.log("// ローカルストレージに格納されてる値の数を表示");
	console.log(localStorage.length);
</script>
// ローカルストレージに格納されてる値の数を表示
5
// ローカルストレージ 'suntory' の値を表示(プロパティアクセス)
プレミアムモルツ
// ローカルストレージ 'kirin' の値を表示(メソッドアクセス)
一番絞り
// ローカルストレージの 0 番めの key を表示
asahi
// ローカルストレージに格納されてる key を一覧表示
asahi
kirin
orion
sapporo
suntory
// ローカルストレージに格納されてる 値 を一覧表示
スーパードライ
一番絞り
オリオンビール
黒ラベル
プレミアムモルツ
// ローカルストレージに格納されてる値の数を表示
4
// ローカルストレージに格納されてる値の数を表示
0

ブラウザによって、多少挙動に違いがあるようです。
localStorageの挙動と簡単なラッパー – Block Rockin’ Codes

Chrome で確認したところ

  • key はアルファベット順で格納されている様子
  • for 文の挙動が、keyを一覧表示する場合と値を一覧表示する場合で異なる
  • 存在しない key の値は "null" ではなく "undefined"

あたりが個人的には気になったのだけど、これって正常な動作なのかな?
誰か教えてー。

また、文字列ではなく、配列やオブジェクトをローカルストレージに格納したい場合は、JSON 化して保存すれば OK のようです。
ローカルストレージに配列やオブジェクトを格納する | Chrome Extensions API リファレンス

参考サイト




0 comments
Submit comment