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);
