Web Storageによるテキストデータの保存 (3/6)
作成:2010-07-16 15:40
更新:2010-07-16 15:40
更新:2010-07-16 15:40
■簡易メモ書きプログラムを考える
１つ１つの値を、キーで指定して取得するのは簡単ですがあまり応用がききません。沢山のデータを保管するような場合、ちょっと面倒なことになりそうです。そこで、たくさんのデータを保管する場合の利用法について考えてみることにしましょう。
ここでは、サンプルとして「簡単メモ書きWebページ」というのを考えてみます。１行だけの入力フォームを用意し、送信するとそのテキストをローカルストレージに保存する、というものです。フォームの下には、保存されたメモ書きが一覧で表示されるようにします。
テキストだけではいつ書いたものかわからないので、あわせて投稿した日時も表示されるようにしましょう。――というか、日時を使ってテキストを保存しよう、というわけなんですが……。
Webストレージは、必ずキーと値がセットになっています。そこで今回のサンプルでは、投稿した日時の値をキーにしてメッセージを保管しよう、というわけです。パソコンでは、日時の値は「タイムスタンプ」（1970年１月１日午前０時からの経過秒数）という値を使って管理しています。このタイムスタンプを使って保管すれば、（まったく同じ時刻に複数投稿することはまずないですから）常に違うキーを割り振って値を保管できるはずですね。
では、下にHTMLのソースコードをあげておきましょう。ここでは入力フォームの他、「追加」「更新」「初期化」といった３つのボタンを用意しておきました。追加はデータを保存し、更新は表示されているデータを最新の状態にし、初期化は全データを消去するものです。
では、続いてスクリプトの作成に進みましょう。
ここでは、サンプルとして「簡単メモ書きWebページ」というのを考えてみます。１行だけの入力フォームを用意し、送信するとそのテキストをローカルストレージに保存する、というものです。フォームの下には、保存されたメモ書きが一覧で表示されるようにします。
テキストだけではいつ書いたものかわからないので、あわせて投稿した日時も表示されるようにしましょう。――というか、日時を使ってテキストを保存しよう、というわけなんですが……。
Webストレージは、必ずキーと値がセットになっています。そこで今回のサンプルでは、投稿した日時の値をキーにしてメッセージを保管しよう、というわけです。パソコンでは、日時の値は「タイムスタンプ」（1970年１月１日午前０時からの経過秒数）という値を使って管理しています。このタイムスタンプを使って保管すれば、（まったく同じ時刻に複数投稿することはまずないですから）常に違うキーを割り振って値を保管できるはずですね。
では、下にHTMLのソースコードをあげておきましょう。ここでは入力フォームの他、「追加」「更新」「初期化」といった３つのボタンを用意しておきました。追加はデータを保存し、更新は表示されているデータを最新の状態にし、初期化は全データを消去するものです。
では、続いてスクリプトの作成に進みましょう。
(by. SYODA-Tuyano.)
※プログラムリストが表示されない場合
AddBlockなどの広告ブロックツールがONになっていると、プログラムリスト等が表示されない場合があります。これらのツールをOFFにしてみてください。
●プログラム・リスト●
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>HTML5</title>
<script type="text/javascript" src="script.js"
charset="UTF-8"></script>
</head>
<body>
<h1>Web Strage Sample</h1>
<input type="text" id="memo">
<input type="button" value="追加"
onclick="saveStorage('memo');">
<input type="button" value="更新"
onclick="loadStorage('msg');">
<input type="button" value="初期化"
onclick="clearStorage('msg');">
<hr>
<p id="msg"></p>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る