今日は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>