JavaScriptで連想配列をLocalStorageに保存する時の方法

HTML5が勧告されたのも2014年10月と言う事だから、もうずいぶんとHTML5がサポートされている環境も整ってきたのではないだろうか。その一つのLocalStorageにJavaScriptの連想配列を保存したいときは以下のようになる。 連想配列をそのまま保存しようとしても[object]とかになってしまう。

var data = [];
data.push({zip:'102-0072', address:'東京都千代田区飯田橋'});
data.push({zip:'102-0082', address:'東京都千代田区一番町'});
data.push({zip:'101-0047', address:'東京都千代田区内神田'});
localStorage.setItem('json', data);

JSON.stringifyを使ってちゃんとJSON文字列に変換してから保存すればうまくいく。

var data = [];
data.push({zip:'102-0072', address:'東京都千代田区飯田橋'});
data.push({zip:'102-0082', address:'東京都千代田区一番町'});
data.push({zip:'101-0047', address:'東京都千代田区内神田'});
localStorage.setItem('json', JSON.stringify(data));

読み込んだ内容をそのまま変数に入れても、こんなになってしまう。

var data = localStorage.getItem('json');
for (var i = 0; i < data.length; i++) {
  for (var key in data[i]) {
    console.log(data[i][key]);
  }
}

読みだす時もJSON.parseを使ってJavaScriptのオブジェクトに変換してやればいい。

var data = localStorage.getItem('json');
data = JSON.parse(data);
for (var i = 0; i < data.length; i++) {
  for (var key in data[i]) {
    console.log(data[i][key]);
  }
}