localStorage之本地留言板

0. 前言

Web应用的飞速发展，使得客户端存储使用得也越来越多，而实现客户端存储的方式则是多种多样。我在前面也有写到Cookie，最简单而且兼容性最佳的就是Cookie，但是Cookie也有它的缺点。假如我们只是存储一些简单的键值对，那么，我们就可以使用localStorage的方式进行存储，因为，localStorage只要是同源都能访问，那你会不会问什么是同源？同源就是同协议，同域名，同端口。好了，本文主要说的是实现localStorage的留言板功能。


timg.jpg

1. 简介

Web Storage实际上是由两部分组成：sessionStorage与localStorage。

sessionStorage 会话存储
通过window.sessionStorage获得，为每一个同源维持一个独立的存储区域，该存储区域在页面会话期间可用，（即只要浏览器处于打开状态，包括页面重新加载和恢复），只要当会话结束之后（即只要关闭浏览器），数据也就随之销毁了，所以sessionStorage不是一个持久型本地存储，只是一个会话存储。

localStorage 本地存储
通过window.localStorage获得，为每一个同源区维持一个独立的存储区域，但是在浏览器关闭之后，然后重新打开数据仍然存在，可以用于持久型的本地存储，除非你主动删除，否则数据永远不会过期。

与cookie的不同
Web Storage数据完全存储在客户端，不需要通过浏览器的请求将数据传送给服务器，大概在5M左右。
注意
Storage的存储的key和value都是字符串，就算存储对象到value中，默认也会给转换成字符串，该字符串是"[ object object]"，如果非要想存储对象的话，而且保留其结构，过后我们获取后可以正常使用的话，我们可以对其存储之前转换成字符串（序列化操作），取出来后，我们再可以转换成对象（反序列化操作）。

2. 代码实现

2.1 留言板的静态页面
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 500px;
                height: 500px;
                margin: 100px auto;
                border: 2px solid darkgreen;
            }
            #msg{
                float: left;
            }
            #msg input:first-of-type{
                width: 390px;
                height: 50px;
                border: 1px solid darkgreen;
                font-size: 30px;
            }
            #msg input:last-of-type{
                width: 100px;
                height: 50px;
                color: white;
                background-color: darkgreen;
                font-size: 30px;
            }
            #clear input{
                width: 200px;
                height: 50px;
                color: white;
                background-color: darkgreen;
                font-size: 30px;
            }
            ul li{
                list-style: none;
                border: 1px solid darkgreen;
            }
            ul li span{
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="msg">
                <input type="text" id="msgInput" placeholder="请输入留言" />
                <input type="button" id="msgBtn" value="留言" />
            </div>
            <div id="content">
                <ul></ul>
            </div>
            <div id="clear">
                <input type="button" id="clearAllBtn" value="清空所有" />
            </div>
        </div>
    </body>
</html>
静态页面.png
2.2 留言按钮
var msgBtn = document.querySelector("#msgBtn");
var msgInput = document.querySelector("#msgInput");
var clearAllBtn = document.querySelector("#clearAllBtn");
var msgUl = document.querySelector("ul");
        //留言按钮
        msgBtn.onclick = function () {
            //字符串trim方法，可以去掉字符串前后两端的空格
            //注意：中间的空格不会去掉，这个方法一般用于输入框空格的判断
            var str = msgInput.value.trim(); 
            if ( str != "" && str != null) {
                //留言信息对象
                var msgObj = {
                    value : escape(str),
                    date : new Date().getTime()
                }
                //存储到本地localStorage中
                window.localStorage.setItem("msg_" + msgObj.date,JSON.stringify(msgObj));
    
                //UI
                msgUl.appendChild(createLi(msgObj));
                
                //每次留言过后，清空input
                msgInput.value = "";
            }
        }
        //创建Li
        function createLi(msgObj) {
            var msgLi = document.createElement("li");
            
            //利用li的自定义属性存储这个li对应的数据（key）
            msgLi.setAttribute("key","msg_" + msgObj.date);
            
            var msgSpan = document.createElement("span");
            msgSpan.innerHTML = unescape(msgObj.value);
            var dateSpan = document.createElement("span");
            //先把时间毫秒数转换成日期格式（date），然后转换成字符串
            dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
            
            msgLi.appendChild(msgSpan);
            msgLi.appendChild(dateSpan);
            
            return msgLi;
            
        }
留言.png

看图片，我们可以看出我们不仅在页面中存储了我的信息，而且在服务器上也存储上了这些信息。

2.3 单个删除留言

在上一个封装的函数中创建删除按钮，实现删除单个留言。

        //创建Li
        function createLi(msgObj) {
            var msgLi = document.createElement("li");
            
            //利用li的自定义属性存储这个li对应的数据（key）
            msgLi.setAttribute("key","msg_" + msgObj.date);
            
            var msgSpan = document.createElement("span");
            msgSpan.innerHTML = unescape(msgObj.value);
            var dateSpan = document.createElement("span");
            //先把时间毫秒数转换成日期格式（date），然后转换成字符串
            dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
            
            //删除单个留言按钮   
            var delBtn = document.createElement("input");
            delBtn.type = "button";
            delBtn.value ="X";
    
            msgLi.appendChild(msgSpan);
            msgLi.appendChild(dateSpan);
            msgLi.appendChild(delBtn);
        
            return msgLi;
            
        }
        //利用事件委托给Ul添加点击事件    单个删除留言
        msgUl.onclick = function (e) {
            if (e.target.nodeName == "INPUT") {
                //删除本地存储中的键值对
                window.localStorage.removeItem(e.target.parentNode.getAttribute("key"));
                
                //删除页面上li
                this.removeChild(e.target.parentNode);
            }
        }
删除单个留言.gif

看图，我先添加一些信息，然后我在点击X号的时候，在本地存储的和页面上的都被删除了。

2.4 清空所有
        //清空所有
        clearAllBtn.onclick = function () {
            
            //数据清空 本地留言相关 存储
            var liArr = document.querySelectorAll("li");
            for (var key in window.localStorage) {
                for (var i = 0; i < liArr.length; i++) {
                    if (liArr[i].getAttribute("key") == key) {
                        window.localStorage.removeItem(key);
                    }
                }
            }
                
            //页面清空
            msgUl.innerHTML = "";
            
        }
删除所有.gif

在我点击删除所有的时候，不管是在本地的还是在页面上的都被删除了。

2.5 显示所有信息
//显示所有留言信息的功能
        function showMsgInfos() {
            var keyRegExp = /^(msg_)/;
            for (var key in window.localStorage) {
                if (keyRegExp.test(key)) {
                    console.log(window.localStorage.getItem(key))
                    console.log(JSON.parse(window.localStorage.getItem(key)))
                    msgUl.appendChild(createLi(JSON.parse(window.localStorage.getItem(key))));
                }
            }
        }
        showMsgInfos();
显示所有信息.png

这个功能我给你展示不了了，就是你存入几条信息，关闭浏览器，然后在打开，那些信息，还会有，当然，在本地里也会有，就证明了localStore的数据持久型的特点，除非你主动删除，否则永远不会过期。

3. 完整代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 500px;
                height: 500px;
                margin: 100px auto;
                border: 2px solid darkgreen;
            }
            #msg{
                float: left;
            }
            #msg input:first-of-type{
                width: 390px;
                height: 50px;
                border: 1px solid darkgreen;
                font-size: 30px;
            }
            #msg input:last-of-type{
                width: 100px;
                height: 50px;
                color: white;
                background-color: darkgreen;
                font-size: 30px;
            }
            #clear input{
                width: 200px;
                height: 50px;
                color: white;
                background-color: darkgreen;
                font-size: 30px;
            }
            ul li{
                list-style: none;
                border: 1px solid darkgreen;
            }
            ul li span{
                padding: 15px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="msg">
                <input type="text" id="msgInput" placeholder="请输入留言" />
                <input type="button" id="msgBtn" value="留言" />
            </div>
            <div id="content">
                <ul></ul>
            </div>
            <div id="clear">
                <input type="button" id="clearAllBtn" value="清空所有" />
            </div>
        </div>
        <script type="text/javascript">
        var msgInput = document.querySelector("#msgInput");
        var msgBtn = document.querySelector("#msgBtn");
        var clearAllBtn = document.querySelector("#clearAllBtn");
        var msgUl = document.querySelector("ul");
        
        //留言按钮
        msgBtn.onclick = function () {
            //字符串trim方法，可以去掉字符串前后两端的空格
            //注意：中间的空格不会去掉，这个方法一般用于输入框空格的判断
            var str = msgInput.value.trim(); 
            if ( str != "" && str != null) {
                //留言信息对象
                var msgObj = {
                    value : escape(str),
                    date : new Date().getTime()
                }
                console.log(msgObj);
                console.log(JSON.stringify(msgObj));
                //存储到本地localStorage中
                window.localStorage.setItem("msg_" + msgObj.date,JSON.stringify(msgObj));
                
                //UI
                msgUl.appendChild(createLi(msgObj));
                
                //每次留言过后，清空input
                msgInput.value = "";
            }
        }
        
        //创建Li
        function createLi(msgObj) {
            var msgLi = document.createElement("li");
            
            //利用li的自定义属性存储这个li对应的数据（key）
            msgLi.setAttribute("key","msg_" + msgObj.date);
            
            var msgSpan = document.createElement("span");
            msgSpan.innerHTML = unescape(msgObj.value);
            var dateSpan = document.createElement("span");
            //先把时间毫秒数转换成日期格式（date），然后转换成字符串
            dateSpan.innerHTML = new Date(msgObj.date).toLocaleString();
            
            //删除单个留言按钮
            var delBtn = document.createElement("input");
            delBtn.type = "button";
            delBtn.value ="X";
            
            msgLi.appendChild(msgSpan);
            msgLi.appendChild(dateSpan);
            msgLi.appendChild(delBtn);
            
            return msgLi;
            
        }
        
        
        //单个删除留言
        msgUl.onclick = function (e) {
            if (e.target.nodeName == "INPUT") {
                //删除本地存储中的键值对
                window.localStorage.removeItem(e.target.parentNode.getAttribute("key"));
                
                //删除页面上li
                this.removeChild(e.target.parentNode);
            }
        }
        
        //清空所有
        clearAllBtn.onclick = function () {
            
            //数据清空 本地留言相关 存储
            var liArr = document.querySelectorAll("li");
            for (var key in window.localStorage) {
                for (var i = 0; i < liArr.length; i++) {
                    if (liArr[i].getAttribute("key") == key) {
                        window.localStorage.removeItem(key);
                    }
                }
            }
                
            //页面清空
            msgUl.innerHTML = "";
            
        }
        
        //显示所有留言信息的功能
        function showMsgInfos() {
            var keyRegExp = /^(msg_)/;
            for (var key in window.localStorage) {
                if (keyRegExp.test(key)) {
                    msgUl.appendChild(createLi(JSON.parse(window.localStorage.getItem(key))));
                }
            }
        }
        showMsgInfos();
        </script>
    </body>
</html>

4. 后记

对于这些存储的了解，我可能理解的不是很好，如果你发现我哪里写错了，请你留言告诉我，最后，留下你的脚印，点个赞，分享一下！！！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容