【js效果】留言版的实现（本地存储）

效果图：

<!--联系我们开始 -->
<div class="linkus container ">

    <div class="linkUsCon cl">
        <div class="bd fl">
            <div class="lines">
                <span>姓名：</span>
                <input type="text" class="name" placeholder="请输入您的姓名" required>
                <i>*</i>
            </div>
            <div class="lines">
                <span>邮箱：</span>
                <input type="email" placeholder="请输入您的邮箱" required>
            </div>
            <div class="lines">
                <span>电话：</span>
                <input type="text" class="tel" placeholder="请输入您的联系电话">
            </div>
            <div class="lines">
                <span>内容：</span>
                <textarea name="" id="" cols="30" rows="10" class="cont" placeholder="请输入您的留言内容"
                    required></textarea>
                <i>*</i>
            </div>
            <div class="lines">
                <button class="btn">确认提交</button>
            </div>
        </div>

        <div class="fr"><img src="images/1.jpeg" alt="" width="450px"></div>
    </div>

    <hr>
    <div class="leaveList">
        <h3>留言列表：</h3>
        <div class="list">
            <div class="item">
                <p class="name">张三：</p>
                <p class="txt">更换发的规划方大化工风格的和规范化的更方便是餐补VB处女边吃饭倒海翻江的丰厚的积分换地方就海景房快速覅而点击开始登录时今飞凯达九分裤</p>
            </div>
        </div>
    </div>
</div>

setHtml();

function setHtml() {
    // 首先拿到之前已经存在的数据
    var item_str = window.localStorage.getItem('leaveWords');

    if (item_str) {
        var item_arr = JSON.parse(item_str);  // 数组
    } else {
        var item_arr = [];
    }

    var html = "";
    for (var i = 0; i < item_arr.length; i++) {
        html += `<div class="item">
                    <p class="name">`+ item_arr[i].name + `：</p>
                    <p class="txt">`+ item_arr[i].txt + `</p>
                </div>`;
    }

    $(".leaveList .list").html(html);
}


$(".btn").click(function () {
    // 表单验证
    var name = $(".name").val();
    var tel = $(".tel").val();
    var cont = $(".cont").val();
    if (name == "") {
        alert("请输入姓名");
        $(".name").focus();
        return
    }
    if (tel == "") {
        alert("请输入您的联系电话");
        $(".tel").focus();
        return
    }
    if (cont == "") {
        alert("请输入留言内容");
        $(".cont").focus();
        return
    }

    if (!window.localStorage) { alert("浏览暂不支持localStorage") } else {

        var item_str = window.localStorage.getItem('leaveWords');

        if (item_str) {
            var item_arr = JSON.parse(item_str);  // 数组
        } else {
            var item_arr = [];
        }

        // json 对象
        let leaveword = {
            name: name,
            txt: cont
        }

        //  把所有增加的内容都追加到数组里面
        item_arr.push(leaveword);

        // 写入缓存  在localStorage中只能以字符串的形式进行保存
        window.localStorage.setItem('leaveWords', JSON.stringify(item_arr))

        setHtml();
        $("input,textarea").val("");
    }

})