jQuery无刷新评论-本地存储

最新推荐文章于 2024-10-08 14:42:28 发布

浮生不觉梦

最新推荐文章于 2024-10-08 14:42:28 发布

阅读量68

点赞数

分类专栏： JavaScript 文章标签： json js html

本文链接：https://blog.csdn.net/weixin_44017079/article/details/115563178

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-3.1.0.js"></script>
    <style>
        #main{
            width: 960px;
            margin: 0 auto;
        }
        .apply div{
            display: flex;
            align-items: center;
            margin: 10px;
        }
        .apply div label{
            width: 100px;
        }
        .apply-item{
            margin: 25px 25px 25px 10px;
        }
    </style>
</head>
<body>
    <div id="main">
        <div id="content">
            <h2>你们坚持了五年以上的习惯是什么？</h2>
            <p>把自己和比自己强的人绑定在一起。利益永远都是社交的本质，只有傻子才为了社交而社交，我很市侩，也很现实，如果我不能和比我强的人绑定在一起，我就无法意识到自己的不足，也就无法进步。近朱者赤，近墨者黑。所以如果有机会接触到牛人，一定要尽力拉近关系，如果能有幸和牛人来一次畅谈，对方的观点和见解，可能让你有【胜读十年书】的震撼。绑定别人最好的方式就是利益相关，一起创业合作，能把对方套的死死的。</p>
        </div>
        <div id="msg">
            <div class="apply">
                <div>
                    <label for="nickName">评论人</label>
                    <input type="text" name="nickName" id="nickName" placeholder="请输入您的昵称">
                </div>
                <div>
                    <label for="app">评论内容</label>
                    <textarea name="app" id="app" cols="30" rows="10"></textarea>
                </div>
                <div>
                    <label></label>
                    <button type="button" id="sub">提交</button>
                </div>
            </div>
            <div class="apply-list">

            </div>
        </div>
    </div>
</body>
<script>
    $(function () {
        getList();
       $("#sub").click(function () {
           let nickName=$("#nickName").val();
           if(!nickName){
               alert("昵称不能为空！");
               return;
           }
           let app=$("#app").val();
           if(!app){
               alert("评论内容不能为空！");
               return;
           }
            let time=new Date().toLocaleString();
           /*清空输入框*/
           $("input,textarea").val("");
            /*初始化评论列表的数组*/
           /*如果本地存储中已经存在则获取已有数组，否则声明为新数组*/
           let appList=localStorage.getItem("appList") || "[]";
           /*json字符串转换json对象*/
           appList=JSON.parse(appList);
           /*封装新的评论内容*/
           let appObj={
               nickName:nickName,
               app:app,
               time:time
           };
           /*最新评论内容添加到数组中*/
           appList.push(appObj);
           /*json对象转json字符串*/
           appList=JSON.stringify(appList);
           /*存入本地存储空间*/
           localStorage.setItem("appList",appList);
           getList();
       });
    });

    function getList(){
        /*获取本地存储中的内容，结果一定是字符串，娶不到值结果为null*/
        let appList=localStorage.getItem("appList") || "[]";
        /*转换json字符串为json对象*/
        appList=JSON.parse(appList);
        /*数组反转*/
        appList=appList.reverse();
        /*遍历数组*/
        let html='';
        for(let i=0;i<appList.length;i++){
            let obj=appList[i];
            html+='<div class="apply-item"><div class="item-nickname">昵称：'+obj.nickName+'</div><div class="item-content">'+obj.app+'</div><div class="item-time">'+obj.time+'</div></div>';
        }
        // $(".apply-list").empty();
        /*jq的链式语法*/
        $('.apply-list').empty().append(html);
    }

</script>
</html>