简单的HTML5 Web Storage留言册 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML5 WebStorage 留言本</title>
    <script type="text/javascript">
        // JavaScript Document
        function savelocalStorage(id) {
            var data = document.getElementById(id).value;
            var time = new Date().getTime();
            localStorage.setItem(time, data);
            loadlocalStorage('msg');
        }

        function loadlocalStorage(id) {
            var result = '<table border="1">';
            for (var i = 0; i < localStorage.length; i++) {
                var key = localStorage.key(i);
                var value = localStorage.getItem(key);
                var date = new Date();
                date.setTime(key);
                var datestr = date.toGMTString();
                result += '<tr><td>' + value + '</td><td>' + datestr + '</td></tr>';
            }
            result += '</table>';
            var target = document.getElementById(id);
            target.innerHTML = result;
        }

        function clearlocalStorage() {
            localStorage.clear();
            loadlocalStorage('msg');
            alert("localStorage留言已被清除！");
        }
    </script>
</head>
<body>
<h3>HTML5 WebStorage 留言本</h3>
<textarea id="demo" cols="60" rows="10"></textarea><br/>
<input type="button" value="留言" onclick="savelocalStorage('demo');"/>
<input type="button" value="清除留言" onclick="clearlocalStorage('msg');"/>
<hr/>
<p id="msg"></p>
</body>
</html>

posted @ 2012-05-03 16:11  dsfderek  阅读(225)  评论(0)    收藏  举报