首页 > 程序开发 > web前端 > HTML/CSS >

HTML5本地储存实现--简易留言板

2017-06-17

HTML5本地储存实现--简易留言板

效果展示:

代码部分:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <h1>简易留言板</h1>
        <textarea id="memo" cols="60" rows="10"></textarea>
        <input type="button" value="追加内容" onclick="saveStorage(&#39;memo&#39;)" />
        <input type="button" value="初始化" onclick="clearStorage(&#39;msg&#39;)" />
        <hr />
        <p id="msg"></p>
        <script type="text/javascript">
 
            function saveStorage(id) {
                //获取textarea的value值
                var data = document.getElementById(id).value;
                //获取当前时间戳
                var time = new Date().getTime();
                //将时间戳作为键值,textarea的value值作为键值的内容保存在本地数据库
                localStorage.setItem(time,data);
                //保存成功后提示成功
                console.log("数据已保存");
                //设置loadStorage函数的传参(ID值)
                loadStorage(&#39;msg&#39;);
            }
 
            function loadStorage(id) {
                var result = &#39;<table border="1">&#39;;
                //遍历本地数据所有内容
                for(var i = 0; i < localStorage.length; i++) {
                    //获取每一条新增的键值
                    var kes = localStorage.key(i);
                    //获取新增键值的内容
                    var value = localStorage.getItem(kes);
                    //获取时间对象
                    var date = new Date();
                    //将时间戳转化为正常时间 Mon Jun 19 1972 11:12:44 GMT+0800 (中国标准时间) 的格式
                    date.setTime(kes);
                    //将转化后的内容变成字符串
                    var datestr = date.toGMTString();
                    //将所有新增内容添加到result变量中
                    result += &#39;<tr><td>&#39; + value + &#39;</td><td>&#39; + datestr + &#39;</td></tr>&#39;
                }
                result += &#39;</table>&#39;;
                var target = document.getElementById(id);
                //将所有内容添加到元素中显示
                target.innerHTML = result;
 
            }
 
            function clearStorage() {
                //清除本地储存所有内容
                localStorage.clear();  
                console.log("清除完毕");
            }
 
        </script>
    </body>
</html>

相关文章
最新文章
热点推荐