back
Web Storageによるテキストデータの保存 (6/6)
■JSONを使ってオブジェクトを管理する
今回は、データを保存するsaveStorageと、入力した名前のデータを取得して表示するfindStorageの２つの関数を用意します。それぞれ流れをざっと整理しましょう。
saveStorageの処理
１．各入力フィールドからテキストを取得します。
２．新しいオブジェクトを作成し、取得した値をプロパティに保管します。
３．オブジェクトをJSON形式のテキストに変換します。
４．ローカルストレージにテキストを保存します。
データを１つのオブジェクトにまとめるには、new Objectで新しいオブジェクトを作成し、それに適当にプロパティを指定して値を保管していきます。そして、オブジェクトをJSONのテキストに変換するには、JSONオブジェクトのstringifyというメソッドを利用しています。これは、引数のオブジェクトをJSON形式のテキストに変換して返すものです。
findStorageの処理
１．ローカルストレージから、入力した名前のデータを取得する。
２．データをもとにJSONオブジェクトを生成する。
３．オブジェクトからプロパティの値を取り出し、出力する内容を生成する。
４．完成したら、innerHTMLで表示する。
今回は、取得したテキストを元にしてJSONオブジェクトを生成するところがポイントとなります。これは、JSONオブジェクトのparseメソッドを使います。引数に指定したテキストをもとに、オブジェクトを生成して返します。
今回は、「JSON」というオブジェクトに用意されている機能（stringifyとparse）を利用しました。が、このJSONというオブジェクトは、比較的最近のブラウザでないと利用できないので注意してください。Firefox 3.6、Chrome 5、Safari 5、Opera 10など最新のブラウザでは既にサポート済みですが、IEの旧バージョンでは動かないでしょう（IE8では動きました）。
saveStorageの処理
１．各入力フィールドからテキストを取得します。
２．新しいオブジェクトを作成し、取得した値をプロパティに保管します。
３．オブジェクトをJSON形式のテキストに変換します。
４．ローカルストレージにテキストを保存します。
データを１つのオブジェクトにまとめるには、new Objectで新しいオブジェクトを作成し、それに適当にプロパティを指定して値を保管していきます。そして、オブジェクトをJSONのテキストに変換するには、JSONオブジェクトのstringifyというメソッドを利用しています。これは、引数のオブジェクトをJSON形式のテキストに変換して返すものです。
findStorageの処理
１．ローカルストレージから、入力した名前のデータを取得する。
２．データをもとにJSONオブジェクトを生成する。
３．オブジェクトからプロパティの値を取り出し、出力する内容を生成する。
４．完成したら、innerHTMLで表示する。
今回は、取得したテキストを元にしてJSONオブジェクトを生成するところがポイントとなります。これは、JSONオブジェクトのparseメソッドを使います。引数に指定したテキストをもとに、オブジェクトを生成して返します。
今回は、「JSON」というオブジェクトに用意されている機能（stringifyとparse）を利用しました。が、このJSONというオブジェクトは、比較的最近のブラウザでないと利用できないので注意してください。Firefox 3.6、Chrome 5、Safari 5、Opera 10など最新のブラウザでは既にサポート済みですが、IEの旧バージョンでは動かないでしょう（IE8では動きました）。
(by. SYODA-Tuyano.)
※リストが表示されない場合
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;
}
| << 前へ |