読者です 読者をやめる 読者になる 読者になる

FOR SE

文系の学部から新卒でメーカー系のSIerに就職。技術・スキルがないためブログを通して勉強。その後、IT業界の業界知識が活かせる人材業界に就職

このエントリーをはてなブックマークに追加

【HTML5・javascript】Webストレージを使ってローカルに値を保存・出力する

【今回の紹介】


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

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



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

■これまではクッキー

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


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

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


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

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

②ローカルストレージ
 文字通りにローカル、クライアントの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>
.hatena-module:nth-of-type(10) { background: transparent; } .hatena-module:nth-of-type(10) .hatena-module-title{ display: none; } .hatena-module:nth-of-type(10) .hatena-module-body { padding: 0; }