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