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

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

作成:2010-07-16 15:51
更新:2010-07-16 15:51

■全データを順に処理するには?

では、スクリプトです。今回は3つのボタンそれぞれで呼び出される関数「saveStorage」「loadStorage」「clearStorage」の3つを作成しましょう。

saveStorage
これは割と簡単ですね。new Date().getTime()で、現在の日時を示すタイムスタンプの値を取得します。そしてlocalStorage.setItemで、タイムスタンプをキーにしてテキストを保存します。保存後、表示を更新するためにloadStorageを呼び出しておきます。

loadStorage
保存されている全データを取得し、テーブルにまとめて表示するものです。これが今回のキモといっていいでしょう。全データを取得するには、localStorageの2つの機能が必要になります。

localStorage.length――ローカルストレージに保管されているデータ数を返します。
localStorage.key( インデックス )――インデックスの番号を引数に渡すと、その番号のキーを返します。

ローカルストレージは、連想配列などとは違い、インデックスでもデータを管理できます。データを保管すると、そのキーにはインデックス番号が割り振られ、ゼロから順にナンバリングされるのです。ですから、lengthで項目数を取得し、繰り返しを使ってゼロ番から順にkeyの値を取り出していけば、すべてのキーと値を処理していくことができるのです。

clearStorage
最後にデータの初期化です。これは、localStorage.clear()を呼び出すだけです。これを実行すると、保存されたすべてのデータが消えてしまいます。

今回のやり方は、保管されている全データを処理するものです。このページで利用するデータが1種類であればこれで十分役に立ちます。が、もしいくつかの種類のデータを保管していたりすると、関係ないデータまで拾ってしまうことになるので注意しましょう。またclearは全データを消してしまうので、いくつかの異なる種類のデータを扱っている場合は利用に注意してください。全部、きれいさっぱり消えますから。

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

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

●プログラム・リスト●

function saveStorage(id){
	var data = document.getElementById(id).value;
	var time = new Date().getTime();
	localStorage.setItem(time,data);
	alert("保存しました。");
	loadStorage('msg');
}

function loadStorage(id){
	var result = '<table border="1">';
	for(var i = 0;i < localStorage.length;i++){
		var key = localStorage.key(i);
		var value = localStorage.getItem(key);
		var date = new Date();
		date.setTime(key);
		var datestr = date.toGMTString();
		result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
	}
	result += '</table>';
	var target = document.getElementById(id);
	target.innerHTML = result;
}

function clearStorage(){
	localStorage.clear();
	alert("すべてのデータを消去しました。");
	loadStorage('msg');
}

※関連コンテンツ

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