liguofeng29’s blog

個人勉強用ブログだっす。

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() + "&nbsp;" + 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>

上記サンプルは、ブラウザを閉じてもう一回表示してもそのデータは保存される。

http://f.st-hatena.com/images/fotolife/l/liguofeng29/20160214/20160214140837.gif?1455426662