【HTML5・javascript】Webストレージを使って、登録・保存・検索・出力する
【メモ】
①Webストレージ内はキーとバリューで管理されている
Webストレージ内はキーとバリューで管理されているということを理解していれば、
登録・検索・変更などの処理は比較的な簡単にできる。
②jsonで格納する際の手順
今回の処理では、
①オブジェクトに値を格納する
②①の値をjsonの手文字列に変換
③Webストレージから取得時にjsonにパースする
という手順をふんでいる。
【参考ソース】
<html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <h1>webstorage</h1> <span>ID:</span><input type='text' id='id'></input> <span>答え:</span><input type='text' id='answer'></input> <input type='button' id='button1' value='送信' onclick="saveStorage('input1');"></input> <input type='button' id='button2' value='読み込み' onclick="loadStorage();"></input> <input type='button' id='button3' value='初期化' onclick="clearStorage();"></input> <span>検索:</span><input type='text' id='serch_text'></input> <input type='button' id='button4' value='検索' onclick="serchStorage();"></input> <p id='output'></p> <script> //IDをキーに保存処理を行う function saveStorage(){ var obj={}; obj.id=$("id").value; obj.answer=$("answer").value; var value=JSON.stringify(obj); localStorage.setItem(obj.id,value); } //インデックスをもとにキーを取得し、値を出力する処理 function loadStorage(){ var result='<table border="1">'; for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); result+= '<tr><td>' + key +'</td><td>'+ localStorage.getItem(key) +'</td></tr>'; } result+='</table>'; $("output").innerHTML=result; } //ストレージ内のデータを削除する処理 function clearStorage(){ localStorage.clear(); loadStorage(); } //IDをキーに検索を行う処理 function serchStorage(){ var serch_text=$("serch_text").value; var result = JSON.parse(localStorage.getItem(serch_text)); console.log(result.answer); } //DOMノードを取得する処理 function $(id){ return document.getElementById(id); } </script> </body> </html>