利用session制作一个留言板 

<!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>

 

posted @ 2018-07-19 17:39  -萌大宝  阅读(492)  评论(0)    收藏  举报