Web Storageによるテキストデータの保存 (5/6)
作成:2010-07-16 16:04
更新:2010-07-16 16:08
更新:2010-07-16 16:08
■簡易データベースとして利用する
こうなると、もう少し欲張って、「Webストレージで、簡易データベースみたいなことはできないか？」と考えてしまいますね。データベースはややこしい、難しそうだ、でもWebストレージなら簡単そうだし、これでちょっとしたデータベースができるならそれで十分だ、そう思う人もいることでしょう。
データベースとして利用するためには、いくつか考えなければいけないことがあります。まず、データベースは多数の項目を持っているのが一般的です。それをどうやって管理すればいいのか。そして、データの検索はどのようにすればいいのか。こうした問題がクリアできれば、Webストレージを簡易データベースとして使える道がひらけます。
今回は、ごく簡単な例として「住所録管理ページ」というのを考えてみましょう。名前・メールアドレス・電話番号・メモ書きといった項目を用意し、これをまとめてローカルストレージに保存します。そして、名前を入力して検索すると、その人の情報が表示される、というようにするのです。
まず、保管するキーに名前を使用すればいい、ということは誰でもわかるでしょう。名前をキーにして、全データを保管する。これができれば、名前でそのデータを取り出すことができます。
では、多数の項目をどうやって一つのテキストとして保管すればいいのか。これには「JSON」を利用する手があります。JSONというのは、「JavaScript Object Notation」の略で、JavaScriptのオブジェクトをテキストとして表すためのフォーマットです。オブジェクトをこのJSON形式のテキストとして保存し、取り出したときにテキストからJSONオブジェクトに戻すことで、複雑な構造のデータをWebストレージに保存できるようになるはずです。
では、スクリプトに進みましょう。
データベースとして利用するためには、いくつか考えなければいけないことがあります。まず、データベースは多数の項目を持っているのが一般的です。それをどうやって管理すればいいのか。そして、データの検索はどのようにすればいいのか。こうした問題がクリアできれば、Webストレージを簡易データベースとして使える道がひらけます。
今回は、ごく簡単な例として「住所録管理ページ」というのを考えてみましょう。名前・メールアドレス・電話番号・メモ書きといった項目を用意し、これをまとめてローカルストレージに保存します。そして、名前を入力して検索すると、その人の情報が表示される、というようにするのです。
まず、保管するキーに名前を使用すればいい、ということは誰でもわかるでしょう。名前をキーにして、全データを保管する。これができれば、名前でそのデータを取り出すことができます。
では、多数の項目をどうやって一つのテキストとして保管すればいいのか。これには「JSON」を利用する手があります。JSONというのは、「JavaScript Object Notation」の略で、JavaScriptのオブジェクトをテキストとして表すためのフォーマットです。オブジェクトをこのJSON形式のテキストとして保存し、取り出したときにテキストからJSONオブジェクトに戻すことで、複雑な構造のデータをWebストレージに保存できるようになるはずです。
では、スクリプトに進みましょう。
(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>
<table>
<tr><td>NAME:</td><td><input type="text" id="name"></td></tr>
<tr><td>MAIL:</td><td><input type="text" id="mail"></td></tr>
<tr><td>TEL :</td><td><input type="text" id="tel"></td></tr>
<tr><td>MEMO:</td><td><input type="text" id="memo"></td></tr>
<tr><td></td><td><input type="button" value="保存"
onclick="saveStorage();"></td></tr>
</table>
<hr>
<p>FIND:<input type="text" id="find">
<input type="button" value="検索"
onclick="findStorage('msg');"></p>
<p id="msg"></p>
</body>
</html>
※関連コンテンツ
「JavaScriptによるHTML5プログラミング入門」に戻る