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

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

作成:2010-07-16 16:19
更新:2010-07-16 16:44

■JSONを使ってオブジェクトを管理する

今回は、データを保存するsaveStorageと、入力した名前のデータを取得して表示するfindStorageの2つの関数を用意します。それぞれ流れをざっと整理しましょう。

saveStorageの処理
1.各入力フィールドからテキストを取得します。
2.新しいオブジェクトを作成し、取得した値をプロパティに保管します。
3.オブジェクトをJSON形式のテキストに変換します。
4.ローカルストレージにテキストを保存します。

データを1つのオブジェクトにまとめるには、new Objectで新しいオブジェクトを作成し、それに適当にプロパティを指定して値を保管していきます。そして、オブジェクトをJSONのテキストに変換するには、JSONオブジェクトのstringifyというメソッドを利用しています。これは、引数のオブジェクトをJSON形式のテキストに変換して返すものです。

findStorageの処理
1.ローカルストレージから、入力した名前のデータを取得する。
2.データをもとにJSONオブジェクトを生成する。
3.オブジェクトからプロパティの値を取り出し、出力する内容を生成する。
4.完成したら、innerHTMLで表示する。

今回は、取得したテキストを元にしてJSONオブジェクトを生成するところがポイントとなります。これは、JSONオブジェクトのparseメソッドを使います。引数に指定したテキストをもとに、オブジェクトを生成して返します。

今回は、「JSON」というオブジェクトに用意されている機能(stringifyparse)を利用しました。が、このJSONというオブジェクトは、比較的最近のブラウザでないと利用できないので注意してください。Firefox 3.6、Chrome 5、Safari 5、Opera 10など最新のブラウザでは既にサポート済みですが、IEの旧バージョンでは動かないでしょう(IE8では動きました)。

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

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

●プログラム・リスト●

function saveStorage(){
	var data = new Object;
	data.name = document.getElementById('name').value;
	data.mail = document.getElementById('mail').value;
	data.tel = document.getElementById('tel').value;
	data.memo = document.getElementById('memo').value;
	var str = JSON.stringify(data);
	localStorage.setItem(data.name,str);
	alert("保存しました。");
}

function findStorage(id){
	var find = document.getElementById('find').value;
	var str = localStorage.getItem(find);
	var data =  JSON.parse(str);
	var result = "NAME: " + data.name + '<br>';
	result += "MAIL: " + data.mail + '<br>';
	result += "TEL : " + data.tel  + '<br>';
	result += "MEMO: " + data.memo + '<br>';
	var target = document.getElementById(id);
	target.innerHTML = result;
}

※関連コンテンツ

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