PC | mobile ver.20170108.

 libro ~入門ドキュメント・サイト~

JavaScriptによるHTML5プログラミング入門:

Web Storageによるテキストデータの保存 (1/6)

作成:2010-07-16 12:26
更新:2010-07-16 19:20
■Web Storageとは?
HTML5の目玉機能といえば、Canvasと並んで「ローカルボリュームへのデータ保存」があげられるでしょう。「HTMLからローカルデータベースが使えるらしい」という話は耳にしたことがあるはずです。これは大変便利ですが、「データベースまで大げさなものは必要ないんだけどな]という人が実は大半かも知れません。

こうした人のために、実はデータベースよりもっと手軽で便利なものがあるのです。それが「Webストレージ」と呼ばれる機能です。

Webストレージは、文字通り「Webのストレージ(外部記憶装置)」です。Webページで使用するデータをブラウザ外(ローカルボリューム)に保存する機能です。これには2つの種類があります。

セッションストレージ
セッションにデータを保管します。セッションというのは、クライアントとサーバー間の連続した接続のことです。Webブラウザからサーバにアクセスしたとき、そのページを開いているブラウザを閉じるまでデータを保管するためのものです。

ローカルストレージ
ローカルボリュームにデータを保存するものです。ハードディスク内に保存するので、ブラウザを終了したあともデータは保持し続けられ、ブラウザを起動すればいつでも呼び出すことができます。

要するに、セッションストレージは一時的な保存、ローカルストレージは永続的な保存のためのもの、と考えればよいでしょう。では、実際にこれらを使ってみましょう。

まずは、サンプルとなるWebページを用意しておきましょう。ここでは、入力フィールドとデータ表示用の<p>タグ、そして保存とロードのためのボタンを持ったページを用意しました。保存とロードのボタンでは、それぞれsaveStorageloadStorageという関数を呼び出すようにしてあります。これらの関数に、Webストレージ利用の処理を用意すればいいわけです。

スクリプトは、例によってscript.jsファイルとして別途用意することにします。


(※――ええと、図版関係のスペルが間違ってますが……StorageがStrageに……投稿した後で気づいた……別に、まぁ実害はないので見逃してくださぃ……)


 

※プログラムリストが表示されない場合

AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。

<!DOCTYPE html> 
<html lang="ja">
	<head> 
		<meta charset="UTF-8">
		<title>HTML5</title>
		<script type="text/javascript" src="script.js"
			charset="UTF-8"></script>
	</head>
	<body>
		<h1>Web Strage Sample</h1>
		<p id="msg"></p>
		<input type="text" id="input">
		<input type="button" value="保存"
				onclick="saveStorage('input');">
		<input type="button" value="読み込み"
				 onclick="loadStorage('msg');">
	</body>
</html>



 


「JavaScriptによるHTML5プログラミング入門」に戻る



※その他のコンテンツ