简单web留言本

最新推荐文章于 2022-07-14 11:26:14 发布

JinmyHe

最新推荐文章于 2022-07-14 11:26:14 发布

阅读量848

点赞数 1

分类专栏： web前端-Javascript 文章标签：留言本 storage

本文链接：https://blog.csdn.net/weixin_42659625/article/details/81978272

版权

web前端-Javascript 专栏收录该内容

50 篇文章 0 订阅

订阅专栏

使用setItem,getItem,clear等方法做一个简单的留言本。

数据以键名/键值这个格式。使用3个方法函数，分别是：

1.saveStorage()

2.loadStorage()

3.clearStorage()

代码如下：

<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>留言本</title>
    <style>

    </style>
</head>

<body>

    <h1>简单的留言本</h1>

    <textarea id="memo" cols="60" rows="10"></textarea><br/>
    <input type="button" value="追加" onclick="saveStorage('memo');">
    <input type="button" value="初始化" onclick="clearStorage('msg');">
    <p id="msg"></p>

    <script>
        function saveStorage(id) {
            var data = document.getElementById(id).value;
            var time = new Date().getTime();
            localStorage.setItem(time, data); //保存数据
            alert("数据已保存");
            loadStorage('msg');
        }

        function loadStorage(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 += '<td><td>' + value + '</td><td>' + datestr + '</td></tr>';
            }
            result += '</table>';
            var target = document.getElementById(id);
            target.innerHTML = result;
        }

        function clearStorage() {
            localStorage.clear();
            alert("全部数据被清除");
            loadStorage('msg');
        }
    </script>
</body>

</html>

运行结果：