HTML5 - Web Storage
WebStorageはwebアプリのデータをクライアントで保存できる仕組み。
cookieの場合以下のデメリットがある
- サイズは4KB
- HTTPリクエスト中に毎回送信される
- セキュリティに問題
Storageの実装
- Session Storage : セッション有効中に保存される
- Local Storage : 明示的に消さない限り保存される
Storageのメソッド
- length
- key(index)
- set(key, value)
- getitem(key)
- removeItem(key)
- clear()
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=SJIS" /> <title> クライアント掲示板 </title> <style type="text/css"> table { border-collapse: collapse; } td, th { border: 1px solid #888; padding: 4px; } </style> </head> <body> <h2>掲示板</h2> <textarea id="msg" name="msg" cols="50" rows="5"></textarea><br/> <input type="button" value="保存" onclick="addMsg();" /> <input type="button" value="全削除" onclick="clearMsg();" /> <hr/> <table style="width:550px"> <tr> <th>message</th> <th>time</th> </tr> <tbody id="show"></tbody> </table> <script type="text/javascript"> // message読取 var loadMsg = function() { var tb = document.getElementById("show"); tb.innerHTML = ""; for (var i = 0; i < localStorage.length; i++) { var key = localStorage.key(i); var date = new Date(); date.setTime(key); // time var datestr = date.toLocaleDateString() + " " + date.toLocaleTimeString(); // message var value = localStorage.getItem(key); var row = tb.insertRow(i); // セル挿入 row.insertCell(0).innerHTML = value; // セル挿入 row.insertCell(1).innerHTML = datestr; } } // message追加 var addMsg = function() { var msgElement = document.getElementById("msg"); var time = new Date().getTime(); localStorage.setItem(time, msgElement.value); msgElement.value = ""; loadMsg(); } // message削除 function clearMsg() { localStorage.clear(); loadMsg(); } window.onload = loadMsg(); </script> </body> </html>
上記サンプルは、ブラウザを閉じてもう一回表示してもそのデータは保存される。