网页刷新重开保留已发布评论

简易评论发布拓展：利用localstorage实现网页刷新和关闭再打开保留评论

简易评论发布的实现

js实现

<script>
    var btn = document.querySelector('button')
    var ul = document.querySelector('ul')
    var uname = document.querySelector('#uname')
    var content = document.querySelector('#content')
    var suarr = localStorage.getItem("username")
    var scarr = localStorage.getItem("content")
    var uarr2 = JSON.parse(suarr) || []
    // 利用JSON的parse方法将获取的字符串转为数组uarr2(uarr即usernameArr，carr同理），当未有评论发布时，为防止uarr2.length为null，程序运行报错，利用||将无缓存评论时的length设置为0
    var carr2 = JSON.parse(scarr) || []
      //同理转化carr2
    var count = uarr2.length
    window.onload = function () {
        if (suarr && scarr) {
       // 检测localStorage内是否存在转化后的json字符串
            for (let i = 0; i < count; i++) {
                var li = document.createElement('li')
                li.innerHTML = "<div class='a'>" + carr2[i] + "</div>" + "<div class='b'><span>发布人：</span>" + uarr2[i] + "</div>"
                ul.insertBefore(li, ul.children[0])
            }
		// 遍历数组，将已发布的评论创建在页面上
        }
    }

    btn.onclick = function () {
        if (uname.value == '') {
            alert('姓名不可为空')
            return false
        } else if (content.value == '') {
            alert('评论内容不可为空')
            return false
        } else {
            var li = document.createElement('li')
            li.innerHTML = "<div class='a'>" + content.value + "</div>" + "<div class='b'><span>发布人：</span>" + uname.value + "</div>"
            ul.insertBefore(li, ul.children[0])
            uarr2.push(uname.value)
            carr2.push(content.value)
            // 每次点击提交发布评论都将评论的内容和发布人推入对应的数组
            localStorage.setItem("username", JSON.stringify(uarr2))
            localStorage.setItem("content", JSON.stringify(carr2))
            // 利用JSON.stringify将数组转为JSON格式的字符串存入localStorage
        }
    }
</script>
2022.6.28