それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

LocalStroageが便利になる、JSON.stringfy

LocalStroageにオブジェクトを入れるには、キーバリューなので、ちょっとめんどくさい。シリアライズをどうするのか

JSON.stringifyを使ってシリアライズ

そのため、JSオブジェクトを扱いたい場合は、JSON.stringifyとJSON.parseを利用するなどして文字列に変換してから利用することをおすすめします。

// 配列をJSON.stringifyで文字列に変換してから保存
var ary = ["aaa", "bbb"];
localStorage.setItem("hoge", JSON.stringify(ary));

// 取り出した文字列をJSON.parseでJSオブジェクトに変換する
JSON.parse(localStorage.getItem("hoge"));
> ["aaa", "bbb"]
http://d.hatena.ne.jp/pikotea/20101224/1293197750

JSONを取り出したりJSONにエンコするには
ブラウザ組込のJSONオブジェクトを使うと便利でしょうね


StorageEvent

Web Storage には、StorageEvent というイベントがあるそうです

// StorageEventを登録
window.addEventListener("storage", function(evt) {
  console.log("old:" + evt.oldValue + "/new:" + evt.newValue);
}, false);
http://d.hatena.ne.jp/pikotea/20101224/1293197750


WebStorageを使った瞬間にイベントが発生する。WebStrageに保存するタイミングで動作する方がテストが楽だし、コード簡潔になる。とくにGUIのクリックイベントが多発するようになると必須のイベントだと思う