HTML5 Web Storage の使い方

HTML5 のストレージとして挙げられるのは Web SQL Database と Web Storage の二つ。

Web アプリケーションのオフライン利用などを考えるにあたり、ストレージは非常に重要な役割となりますが、そのうち、Web SQL Database は HTML5 標準から落ちた形となりました。

(といっても、Web SQL Database が消えてなくなるということにはならないと思いますが)

そのため HTML5 標準という形で残っているのは現状 Web Storage です。

ここでは Web Storage の使い方を紹介します。

HTML5 Web Storage

Web Storage はキーと値のペアを簡単に保存、取得するためのインターフェイスです。 JavaScript からは window.localStorage を通して Web Storage を利用できます。

ご存知の通りクライアントサイドスクリプトでは、Window オブジェクトがグローバルオブジェクトですから、 localStorage は window. なしでもアクセス可能、というわけです。

localStorage の setItem メソッドでキー・値のペアを設定、getItem メソッドで指定したキーに対応する値を取得します。

Web Storage の動作確認

ではさっそく、簡単な動作確認をしましょう。

HTML はこちら。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="test.js"></script>
</head>
<body>
<h1>Web Storage</h1>

<h2>保存</h2>
<div>
<input type="text" id="text1">
<button type="button" id="saveButton">Save</button>
</div>

<h2>読込み</h2>
<div>
<button type="button" id="readButton">Read</button>
</div>

</body>
</html>

「Save」ボタンを押したときに、テキストボックスに入力した値を Web Storage に保存。「Read」ボタンを押したときに、それを Web Storage から読み込みましょう。

JavaScript はこちら。

$(document).ready(function(){

	$('#saveButton').click(function(){

		if(window.localStorage){
			var s = $('#text1').val();
			localStorage.setItem("key1", s);
		}

	});

	$('#readButton').click(function(){

		if(window.localStorage){
			alert( localStorage.getItem("key1") );
		}

	});
});

上記を実行すると次のようになります。

HTML5 Web Storage

テキストボックスに何か値を入力して Save をクリックすると、その値を "key1" キーに対応する値として Web Storage に保存します。

Read をクリックすると "key1" というキー名を指定して getItem メソッドを呼ぶことでその値を alert ボックスに表示するわけです。

Google Chrome を利用すると、次のようにデベロッパーツールで Local Storage の内容を UI から確認することが可能です。

HTML5 Web Storage