back

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

■簡易メモ書きプログラムを考える

１つ１つの値を、キーで指定して取得するのは簡単ですがあまり応用がききません。沢山のデータを保管するような場合、ちょっと面倒なことになりそうです。そこで、たくさんのデータを保管する場合の利用法について考えてみることにしましょう。

ここでは、サンプルとして「簡単メモ書き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>



　 　

記事のリストに戻る



PC Site G+ mail
copyright 2009. SYODA-tuyano.