【HTML5・javascript】Webストレージを使ってローカルに値を保存・出力する
【今回の紹介】
Webにおいて簡易な情報をローカルに保存するには
①ブラウザに保存する(クッキー)
②外部ファイルへ保存する(XML・jsonとしてはきだす)
③DB
しかなく、意外と面倒だと思ってました。
いまさらですが、この①の部分野認識は、HTML5に登場によって大きく変わるようなのでメモしときます
「ページ遷移を伴うデータの保存について」
■これまではクッキー
ページ遷移を伴うデータの保存はそれまでクッキーで行っていた
クッキーはその保存量とセキュリティに配慮が必要だった
■これからはWebストレージ?
HTML5では、Webストレージというのが使えるようになった
Webストレージには2種類ある
①セッションストレージ
サーバとクライアントの連続した通信を行っている間のみ
ページアクセスからブラウザを閉じるまでの間のデータ保管
②ローカルストレージ
文字通りにローカル、クライアントのHDに保存する。
ブラウザを閉じても再読み込み可能
【処理の流れ】
参考ソースに簡単にローカルストレージを使用したサンプルを載せています
その流れをメモしときます
①入力した値を作成時間をキーにローカルストレージに格納
②ローカルストレージに格納されているデータのインデックスを取得
③②のインデックスの情報をもとにキーを取得
④キーをもとに値を取得
⑤値と作成日時をテーブルタグに入れる
⑥②から⑤を格納されているデータの数だけ繰り返す
⑦innerHTMLで結果の出力
といった流れです。
【メモ】
①簡易なデータならば、DBではなくWebストレージが使えるかも
ローカルストレージでは、キーとバリューで保存されているが、
キー自体はインデックスがふってある。
したがって、参考ソースのようにfor文でまとめて表示などもできるため、とても便利。
■参考ソース
<html> <head> <meta charset='utf-8'> </head> <title>HTML5</title> <body> <h1>webstorage</h1> <input type='text' id='input1'></input> <input type='button' id='button1' value='送信' onclick="saveStorage('input1');"></input> <input type='button' id='button2' value='読み込み' onclick="loadStorage();"> <input type='button' id='button3' value='初期化' onclick="clearStorage();"> <p id='output'></p> </input> <script> function saveStorage(){ var target=$("input1").value; var key=new Date(); console.log(key.toLocaleString()); localStorage.setItem(key,target); } function loadStorage(){ var result='<table border="1">'; for(var i=0;i<localStorage.length;i++){ var key=localStorage.key(i); result+= '<tr><td>' +localStorage.getItem(key) +'</td><td>'+ key.toLocaleString() +'</td></tr>'; } result+='</table>'; $("output").innerHTML=result; } function clearStorage(){ localStorage.clear(); loadStorage(); } function $(id){ return document.getElementById(id); } </script> </body> </html>