localStorageとsessionStorage - @thorikiriのてょりっき

今日はlocalStorageとsessionStorageを学んだよ。
この2つのAPIは使い方は一緒です。
ただ、sessionはブラウザのタブが異なったりすると引き継がれないし、一度閉じると引き継がれません。それに対してlocalは別タブでも引き継ぐし、一度閉じても有効みたいです。
気をつけることは幾つかありそうです。
まず、容量制限があること。これはブラウザごとに違うようだし、バージョンによっても違うから、あんまり多くは入れられませんね。
次に、文字列しか値に入れられないみたいです。JSONオブジェクトをそのまま突っ込んだら切ないことになりました。なので、一度文字列化してから入れて、取り出したらJSONに戻すなどが必要です。
最後に、localStorage["name"] = value; みたいにして、値を入れられるのですが、localStorage["key"]とかやると切ないことになります。何故なら、keyは関数として元から定義されているものだからね。一度登録して、同じ画面で取得した場合は正常に動くけど、リロードしたらFunctionオブジェクトが取り出せちゃいます。setItem("key", "value")、getItemを使うのが無難かと思いますよ。

コードはこんな感じです。

    // 登録する
    localStorage.setItem("key", value);
    // 取得する
    var value = localStorage.getItem("key");
    // 削除する
    localStorage.removeItem("key");

で、これでどうしたいのかって言うと、マスタ的な情報とかは保持していればいいかな？とか思うんです。Cookieより多くの情報を突っ込めるからね。
Googleのappengineとかだと、Datastoreにアクセスが増えるのはあれだし、JSONで取ってくるのが普通だと思うんですよ。なので、これをlocalStorageやsessionStorageに入れておくのが良いかと。
ただし、localStorageの場合ある程度の頻度では、再取得しないといけない種類のデータもあると思います。そこは、データと相談な感じですね。

今日作ったサンプルはこんな感じです。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>localstrage sample</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
(function() {
	$(function() {
		$("#setButton").click(function() {
			var value = $("#text").val();
			if (value) {
				localStorage.setItem("key", value);
			} else {
				alert("何か入力してね！");
			}
		});
		$("#getButton").click(function() {
			var value = localStorage.getItem("key");
			alert(value);
		});
		$("#removeButton").click(function() {
			localStorage.removeItem("key");
		});
	});
})();
</script>
</head>
<body>
<div><input type="text" id="text" /></div>
<div>
<input type="button" value="設定する" id="setButton" /> 
<input type="button" value="取得する" id="getButton"/> 
<input type="button" value="削除する" id="removeButton" />
</div>
</body>
</html>