Web Storageによるテキストデータの保存 (1/6)
作成:2010-07-16 12:26
更新:2010-07-16 19:20
更新:2010-07-16 19:20
■Web Storageとは？
HTML5の目玉機能といえば、Canvasと並んで「ローカルボリュームへのデータ保存」があげられるでしょう。「HTMLからローカルデータベースが使えるらしい」という話は耳にしたことがあるはずです。これは大変便利ですが、「データベースまで大げさなものは必要ないんだけどな］という人が実は大半かも知れません。
こうした人のために、実はデータベースよりもっと手軽で便利なものがあるのです。それが「Webストレージ」と呼ばれる機能です。
Webストレージは、文字通り「Webのストレージ（外部記憶装置）」です。Webページで使用するデータをブラウザ外（ローカルボリューム）に保存する機能です。これには２つの種類があります。
セッションストレージ
セッションにデータを保管します。セッションというのは、クライアントとサーバー間の連続した接続のことです。Webブラウザからサーバにアクセスしたとき、そのページを開いているブラウザを閉じるまでデータを保管するためのものです。
ローカルストレージ
ローカルボリュームにデータを保存するものです。ハードディスク内に保存するので、ブラウザを終了したあともデータは保持し続けられ、ブラウザを起動すればいつでも呼び出すことができます。
要するに、セッションストレージは一時的な保存、ローカルストレージは永続的な保存のためのもの、と考えればよいでしょう。では、実際にこれらを使ってみましょう。
まずは、サンプルとなるWebページを用意しておきましょう。ここでは、入力フィールドとデータ表示用の<p>タグ、そして保存とロードのためのボタンを持ったページを用意しました。保存とロードのボタンでは、それぞれsaveStorage、loadStorageという関数を呼び出すようにしてあります。これらの関数に、Webストレージ利用の処理を用意すればいいわけです。
スクリプトは、例によってscript.jsファイルとして別途用意することにします。
（※――ええと、図版関係のスペルが間違ってますが……StorageがStrageに……投稿した後で気づいた……別に、まぁ実害はないので見逃してくださぃ……）
こうした人のために、実はデータベースよりもっと手軽で便利なものがあるのです。それが「Webストレージ」と呼ばれる機能です。
Webストレージは、文字通り「Webのストレージ（外部記憶装置）」です。Webページで使用するデータをブラウザ外（ローカルボリューム）に保存する機能です。これには２つの種類があります。
セッションストレージ
セッションにデータを保管します。セッションというのは、クライアントとサーバー間の連続した接続のことです。Webブラウザからサーバにアクセスしたとき、そのページを開いているブラウザを閉じるまでデータを保管するためのものです。
ローカルストレージ
ローカルボリュームにデータを保存するものです。ハードディスク内に保存するので、ブラウザを終了したあともデータは保持し続けられ、ブラウザを起動すればいつでも呼び出すことができます。
要するに、セッションストレージは一時的な保存、ローカルストレージは永続的な保存のためのもの、と考えればよいでしょう。では、実際にこれらを使ってみましょう。
まずは、サンプルとなるWebページを用意しておきましょう。ここでは、入力フィールドとデータ表示用の<p>タグ、そして保存とロードのためのボタンを持ったページを用意しました。保存とロードのボタンでは、それぞれsaveStorage、loadStorageという関数を呼び出すようにしてあります。これらの関数に、Webストレージ利用の処理を用意すればいいわけです。
スクリプトは、例によってscript.jsファイルとして別途用意することにします。
（※――ええと、図版関係のスペルが間違ってますが……StorageがStrageに……投稿した後で気づいた……別に、まぁ実害はないので見逃してくださぃ……）
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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プログラミング入門」に戻る