Web Storageによるテキストデータの保存 (4/6)
作成:2010-07-16 15:51
更新:2010-07-16 15:51
更新:2010-07-16 15:51
■全データを順に処理するには？
では、スクリプトです。今回は３つのボタンそれぞれで呼び出される関数「saveStorage」「loadStorage」「clearStorage」の３つを作成しましょう。
saveStorage
これは割と簡単ですね。new Date().getTime()で、現在の日時を示すタイムスタンプの値を取得します。そしてlocalStorage.setItemで、タイムスタンプをキーにしてテキストを保存します。保存後、表示を更新するためにloadStorageを呼び出しておきます。
loadStorage
保存されている全データを取得し、テーブルにまとめて表示するものです。これが今回のキモといっていいでしょう。全データを取得するには、localStorageの２つの機能が必要になります。
localStorage.length――ローカルストレージに保管されているデータ数を返します。
localStorage.key( インデックス )――インデックスの番号を引数に渡すと、その番号のキーを返します。
ローカルストレージは、連想配列などとは違い、インデックスでもデータを管理できます。データを保管すると、そのキーにはインデックス番号が割り振られ、ゼロから順にナンバリングされるのです。ですから、lengthで項目数を取得し、繰り返しを使ってゼロ番から順にkeyの値を取り出していけば、すべてのキーと値を処理していくことができるのです。
clearStorage
最後にデータの初期化です。これは、localStorage.clear()を呼び出すだけです。これを実行すると、保存されたすべてのデータが消えてしまいます。
今回のやり方は、保管されている全データを処理するものです。このページで利用するデータが１種類であればこれで十分役に立ちます。が、もしいくつかの種類のデータを保管していたりすると、関係ないデータまで拾ってしまうことになるので注意しましょう。またclearは全データを消してしまうので、いくつかの異なる種類のデータを扱っている場合は利用に注意してください。全部、きれいさっぱり消えますから。
saveStorage
これは割と簡単ですね。new Date().getTime()で、現在の日時を示すタイムスタンプの値を取得します。そしてlocalStorage.setItemで、タイムスタンプをキーにしてテキストを保存します。保存後、表示を更新するためにloadStorageを呼び出しておきます。
loadStorage
保存されている全データを取得し、テーブルにまとめて表示するものです。これが今回のキモといっていいでしょう。全データを取得するには、localStorageの２つの機能が必要になります。
localStorage.length――ローカルストレージに保管されているデータ数を返します。
localStorage.key( インデックス )――インデックスの番号を引数に渡すと、その番号のキーを返します。
ローカルストレージは、連想配列などとは違い、インデックスでもデータを管理できます。データを保管すると、そのキーにはインデックス番号が割り振られ、ゼロから順にナンバリングされるのです。ですから、lengthで項目数を取得し、繰り返しを使ってゼロ番から順にkeyの値を取り出していけば、すべてのキーと値を処理していくことができるのです。
clearStorage
最後にデータの初期化です。これは、localStorage.clear()を呼び出すだけです。これを実行すると、保存されたすべてのデータが消えてしまいます。
今回のやり方は、保管されている全データを処理するものです。このページで利用するデータが１種類であればこれで十分役に立ちます。が、もしいくつかの種類のデータを保管していたりすると、関係ないデータまで拾ってしまうことになるので注意しましょう。またclearは全データを消してしまうので、いくつかの異なる種類のデータを扱っている場合は利用に注意してください。全部、きれいさっぱり消えますから。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
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プログラミング入門」に戻る