libro
www.tuyano.com
JavaScriptによるHTML5プログラミング入門

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

作成:2010-07-16 12:55
更新:2010-07-16 19:21

■セッションストレージとローカルストレージ

では、script.jsにスクリプトを作成しましょう。以下に、セッションストレージを使った場合と、ローカルストレージを使った場合の2通りのリストを掲載しておきます。いずれも、テキストを書いて「保存」ボタンを押すとストレージに値が保管され、「読み込み」ボタンを押すと保存した値をロードして表示します。

実際に両者を使って、動作の違いを確かめてみましょう。セッションストレージを使った場合、ブラウザを閉じると、もう値は消えてしまいます。次にブラウザを起動し、「読み込み」ボタンを押しても値は表示されません。

ローカルストレージを使った場合、ブラウザを終了してからまた起動してもちゃんと値がロードされます。ただし、値はブラウザごとに保管されますから、ローカルボリュームに保管したといっても、別のブラウザから読み込むことはできません。使えるのは、あくまで保存したブラウザだけです。

では、データの読み書きをしている部分を見てみましょう。以下に基本的なメソッドをざっと整理しておきます。

・セッションストレージの場合
保存: sessionStorage.setItem( キー, 値 );
読込: 変数 = sessionStorage.getItem( キー );

・ローカルストレージの場合
保存: localStorage.setItem( キー, 値 );
読込: 変数 = localStorage.getItem( キー );
Webストレージは、セッション、ローカルボリュームそれぞれに「sessionStorage」「localStorage」という名前でオブジェクトが用意されています。これらの中にあるメソッドを呼び出すことで、データの読み書きが行えるわけです。

読み書きは、いずれのオブジェクトも「getItem」「setItem」というメソッドとして用意されています。これらはいずれも値にキーを割り振って保管するようになっています。getItemでは、引数にキーを指定すると、そのキーに保管されているデータを返します。setItemでは、第1引数に指定したキーに、第2引数のデータを保管します。

キーは、すべてユニーク(同一の値がない)でなければいけません。また値は後で変更できますが、キーは変更できません(新たなキーに値を保存しなおすことは可能です)。

キーという名前をつけて値を保存するだけですから、扱いは非常に簡単です。反面、データベースのように複雑なデータを保管したり、複雑な検索をしたり、といった機能はありません。そのあたりは、すっきりと割り切って使うしかありません。(まぁ、「複雑なことがしたければデータベースを使え」ということなのでしょう)

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

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

●プログラム・リスト●

※セッションストレージの例

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	sessionStorage.setItem("message",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = sessionStorage.getItem("message");
	target.innerHTML = msg;
}

※ローカルストレージの例

function saveStorage(id){
	var target = document.getElementById(id);
	var str = target.value;
	localStorage.setItem("message",str);
}

function loadStorage(id){
	var target = document.getElementById(id);
	var msg = localStorage.getItem("message");
	target.innerHTML = msg;
}

※関連コンテンツ

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