欧美《交换做爰》,久久精品国产亚洲精品,国产高清露脸孕妇系列

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. 后記

對于這些存儲的了解，我可能理解的不是很好，如果你發現我哪里寫錯了，請你留言告訴我，最后，留下你的腳印，點個贊，分享一下！?。?/p>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

localStorage之本地留言板

localStorage之本地留言板

0. 前言

1. 簡介

2. 代碼實現

2.1 留言板的靜態頁面

2.2 留言按鈕

2.3 單個刪除留言

2.4 清空所有

2.5 顯示所有信息

3. 完整代碼

4. 后記

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

localStorage之本地留言板

0. 前言

1. 簡介

2. 代碼實現

2.1 留言板的靜態頁面

2.2 留言按鈕

2.3 單個刪除留言

2.4 清空所有

2.5 顯示所有信息

3. 完整代碼

4. 后記

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频