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

标签：contain   效果图   hold   focus   提交   func   set   window   item   

效果图：

    

        

            

                姓名：
                *
            
            

                邮箱：
                

            

                电话：
                

            

                内容：
                *
            
            

                确认提交
            
        

        

    

    


        
留言列表：
        

            

                
张三：
                
更换发的规划方大化工风格的和规范化的更方便是餐补VB处女边吃饭倒海翻江的丰厚的积分换地方就海景房快速覅而点击开始登录时今飞凯达九分裤
            
        
    

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[i].name + `：
                    
`+ item_arr[i].txt + `
                `;
    }

    $(".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("");
    }

})

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

标签：contain   效果图   hold   focus   提交   func   set   window   item   

原文地址：https://www.cnblogs.com/hellocd/p/14255154.html