Webアプリでデータの保存

HTML5+JavaScriptでローカルにデータを保存する実験。

データの保存にはWebStorageを用いる。
WebSotrageはKey-Valueストア方式。
永続保存されるlocalStorageとブラウザ閉じたら消えるsessionStorageがある。
保存/読み出しはsetItem/getItemメソッドを使う書き方と、キーをプロパティ名にする書き方がある。
保存できる値は文字列のみである。
数値なら読み出し後に数値に変換する。
配列ならjoinで連結して保存し、読み出し後にsplitで分割する。
オブジェクトならJSON形式の文字列に変換して保存。

簡単なサンプル

<!DOCTYPE html><html lang="ja"><head>
<meta charset="UTF-8">
<title>Web Storage</title>
</head>
<body>
<p>
キー：<input id="key" type="text">
値：<input id="val" type="text">
<input type="button" value="保存" onClick="set_data()">
</p>
<p>
<div id="data_list"></div>
<input type="button" value="クリア" onClick="clear_data()">
</p>
<script>
//データを保存
function set_data() {
  var key = document.getElementById("key").value;
  var val = document.getElementById("val").value;
  localStorage.setItem(key, val);
  // リスト表示を更新
  show_list();
}

//データをクリア
function clear_data() {
  // 同オリジン(プロトコル+ドメイン+ポート)の保存データ全削除なので注意
  // 1個ずつ消すなら localStorage.removeItem(キー)
  localStorage.clear();
  // リスト表示を更新
  show_list();
}

//保存データをリスト表示
function show_list() {
  var result = "";
  for(var i=0; i<localStorage.length; i++){
    var key = localStorage.key(i);
    var val = localStorage.getItem(key);
    result += key + "：" + val + "<br>";
  }
  document.getElementById("data_list").innerHTML = result;
}

// 読み込み時にリスト表示
window.onload = show_list;

</script></body></html>

数値の場合

  // 保存
  var x = 1;
  var y = 2;
  localStorage.x = x;
  localStorage.y = y;

  // 読み出し  
  var x = parseInt(localStorage.x, 10); // 10進数として変換
  var y = parseInt(localStorage.y, 10); // 10進数として変換
  console.log(x+y);

配列の場合

  // 保存
  var ary = ["AAA","BBB","CCC"];
  localStorage.ary = ary.join(":"); // : を区切り文字として連結

  // 読み出し  
  var ary = localStorage.ary.split(":"); // : を区切り文字として分割
  console.log(ary[1]);

オブジェクトの場合

  // 保存
  var obj = {name:"Tarou", age:30};
  localStorage.obj = JSON.stringify(obj); // JSON形式にシリアライズ

  // 読み出し  
  var obj = JSON.parse(localStorage.obj); // JSON形式からデシリアライズ
  console.log(obj.name);