【HTML5・javascript】Webストレージを使ってローカルに値を保存・出力する - 新卒から文系エンジニア→人材業界に転職した人のブログ

【今回の紹介】

Webにおいて簡易な情報をローカルに保存するには
　①ブラウザに保存する（クッキー）
　②外部ファイルへ保存する（XML・jsonとしてはきだす）
　③DB

しかなく、意外と面倒だと思ってました。
いまさらですが、この①の部分野認識は、HTML5に登場によって大きく変わるようなのでメモしときます

【内容】

参考サイト
　①参考:HTML5について体系的にまとめているサイト
　②@ITの記事

「ページ遷移を伴うデータの保存について」

■これまではクッキー

ページ遷移を伴うデータの保存はそれまでクッキーで行っていた
クッキーはその保存量とセキュリティに配慮が必要だった

■これからはWebストレージ？

HTML5では、Webストレージというのが使えるようになった

Webストレージには２種類ある

①セッションストレージ
　サーバとクライアントの連続した通信を行っている間のみ
　ページアクセスからブラウザを閉じるまでの間のデータ保管

②ローカルストレージ
　文字通りにローカル、クライアントのHDに保存する。
　ブラウザを閉じても再読み込み可能

【処理の流れ】

　参考ソースに簡単にローカルストレージを使用したサンプルを載せています
　その流れをメモしときます
　①入力した値を作成時間をキーにローカルストレージに格納
　②ローカルストレージに格納されているデータのインデックスを取得
　③②のインデックスの情報をもとにキーを取得
　④キーをもとに値を取得
　⑤値と作成日時をテーブルタグに入れる
　⑥②から⑤を格納されているデータの数だけ繰り返す
　⑦innerHTMLで結果の出力
　といった流れです。
　

【メモ】

　①簡易なデータならば、DBではなくWebストレージが使えるかも
　　ローカルストレージでは、キーとバリューで保存されているが、
　　キー自体はインデックスがふってある。
　　したがって、参考ソースのようにfor文でまとめて表示などもできるため、とても便利。

■参考ソース

<html>
<head>
<meta charset='utf-8'>
</head>
<title>HTML5</title>
<body>
<h1>webstorage</h1>
<input type='text' id='input1'></input>
<input type='button' id='button1' value='送信' onclick="saveStorage('input1');"></input>
<input type='button' id='button2' value='読み込み' onclick="loadStorage();">
<input type='button' id='button3' value='初期化' onclick="clearStorage();">
<p id='output'></p>
</input>

<script>
function saveStorage(){
	var target=$("input1").value;
	var key=new Date();
	console.log(key.toLocaleString());
	localStorage.setItem(key,target);
	}

function loadStorage(){
	var result='<table border="1">';
	for(var i=0;i<localStorage.length;i++){
		var key=localStorage.key(i);
		result+= '<tr><td>' +localStorage.getItem(key) +'</td><td>'+ key.toLocaleString() +'</td></tr>';
		}
	result+='</table>';
	$("output").innerHTML=result;
}
function clearStorage(){
localStorage.clear();
loadStorage();
}



		
function $(id){
	return document.getElementById(id);
}
</script>
</body>
</html>