ローカルストレージを利用して端末にデータを保存する(HTML5)

HTML5では端末にデータを保存するためのWeb Storage という仕組が用意されている。Web Storage にはセッション中のみ有効な Session Storage と、永続的に有効な Local Storage がある。

いずれも「キー」と「値」のペアで保存し、取得時に「キー」を指定すると対応する「値」が返ってくるというシンプルな仕組だ。

// localStorage は window.localStorage と等価で、windowは省略可能
// methods
localStorage.getItem(_key); // キーを指定して値を取得
localStorage.setItem(_key, _val); // キーと値を指定して保存
localStorage.removeItem(_key); // キーを指定してデータを削除
localStorage.clear(); // 全てのデータを削除
localStorage.key(number); // インデックス番号を指定してキーを取得

// property
localStorage.length // 保存されているデータ数を取得

値には文字列を指定する。オブジェクトを保存する際は、JSON.stringify() などを使って文字列化する。(復元する場合は JSON.parse() などを使う。)

使用例：

// データ取得
// ローカルストレージに保存した際のキー(JSONファイル名 例：T9999999.json)
var ls_key = line.ln_file;
// キーを指定してローカルストレージから路線データをロードする
var ls_val = localStorage.getItem(ls_key);
// 取得した結果をオブジェクトに復元する
gCurRail = JSON.parse(ls_val);

// データ保存
loadJsonAsync(uri, function(d){
  // サーバからロードした内容を文字列に変換してローカルストレージに保存
  localStorage.setItem(line.ln_file, JSON.stringify(d));
});

実際にどういうデータが保存されているかは、ブラウザのツールでも確認可能。例えば、chromeでは、JavaScriptコンソールの「Resources」で確認できる。