利用session制作一个留言板

最新推荐文章于 2022-11-13 16:16:29 发布

转载最新推荐文章于 2022-11-13 16:16:29 发布 · 222 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ChengMeng/p/9337190.html

文章标签：

#javascript #ViewUI

本文介绍了一个简单的HTML页面，该页面使用JavaScript和LocalStorage实现留言功能。用户可以在文本区域输入留言并点击发表按钮来保存留言，所有留言将显示在页面上，并且可以通过清除按钮删除所有已保存的留言。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="JS/jquery-3.3.1.js"></script>
    <script type="text/javascript">
        $(function () {
            if (localStorage.getItem("context") != null) {
                $("#swcon").html(localStorage.getItem("context"))
            } else {
                $("#swcon").html("<div id='firstmessage'>没有更多内容了！</div>")
            }
        })
        function Btn1() {
            if ($("#tacon").val() != "") {
                var tacontext = $("#tacon").val();
                var datetimenow = new Date();
                $("#swcon").prepend("<div>" + tacontext + "-------------" + datetimenow + "</div>");
                localStorage.setItem("context", $("#swcon").html())
            } else {
                alert("不能发表内容为空的留言！")
            }
        };
        function Btn2() {
            //判断是否存在context的数据
            if (localStorage.getItem("context") != null) {
                //存在则清除它
                localStorage.clear()
                //判断是否清除成功
                if (localStorage.getItem("context") == null) {
                    alert("清除成功！");
                    window.location.reload()
                } else {
                    alert("清除失败！");
                }
            } else {
                alert("没有需要清除的数据！");
            }
        };
      
    </script>
</head>
<body>
    <textarea id="tacon" cols="30" rows="8" placeholder="请输入留言"></textarea>
    <input type="button" value="发表" onclick="Btn1()" />
    <input type="button" value="清除" onclick="Btn2()" />
    <div id="swcon"></div>
</body>
</html>