客戶端本地存儲的比較及使用window.name數據傳輸

一：cookie：

 1. 什麼是cookie？

     Cookie是在客戶端用於存儲會話信息的，用戶請求頁面在web服務器與瀏覽器之間傳遞。每當同一臺計算機經過瀏覽器請求某個頁面時，就會發送這個 cookie。

 2. cookie的限制？

     1. Cookie的數據大小限制只能爲4kb數據，若是數據長度超過4kb數據，超事後的數據將返回空字符串。

     2. Cookie是以文件形式存儲在客戶端計算機中，查看和修改cookie很方便，可是安全性方面很差，所以重要的數據不要使用cookie來存儲。

     3. Cookie是有 有效期概念的，若是想要cookie存儲多長時間，能夠設置cookie的時間，通常的狀況下，cookie的生命週期是在遊覽器關閉的時候失效。

     4. Cookie是有域的概念的，在不一樣的域下，cookie不能互相使用，cookie對於那個域是有效的，全部向該域發送的請求中都會包含這個cookie 的信息的，這個值能夠包含子域(subdomain 如www.zuixiandao.cn) ,也能夠不包含它(如.zuixiandao.cn, 對於全部的zuixiandao.cn的全部子域都有效). 若是沒有明確的指定，那麼這個域會被認做來自設置cookie的那個域。

     5. Cookie路徑的概念：對於指定域中的那個路徑，應該向服務器發送cookie，好比咱們能夠指定cookie只有從http://www.zuixiandao.cn/books/中才能訪問，那麼http://www.zuixiandao.cn的頁面就不會發送cookie信息。

     6. Cookie失效時間的概念：表示cookie什麼時候應該被刪除，默認狀況下，瀏覽器會話結束時即將刪除全部的cookie，不過也能夠本身設置刪除時間的。這個值是個GMT格式的日期(Wdy DD-Mon-YYYY HH:MM:SS GMT),用於指定應該刪除cookie的準確時間，所以，cookie可在瀏覽器關閉後依然保存在用戶的機器上(同一個瀏覽器，不一樣的瀏覽器不能保存),若是設置的日期是過時的日期，那麼cookie馬上刪掉。

      7. Cookie安全標誌 指定後，cookie只有在使用SSL鏈接的時候才發送到服務器。好比：cookie信息只能發送給https://www.zuixiandao.cn, 而http://www.zuixiandao.cn的請求則不能發送cookie。

二： javascript中的cookie

1. Javascript中的cookie是 一系列由分號隔開的名-值對，以下面的淘寶的cookie，以下：

         document.cookie = "isg=E5AA5F2CEE8AA93BB351D1601F7B218E; thw=cn; _med=dw:1920&dh:1080&pw:1920&ph:1080&ist:0; v=0; t=1292efa78d867ff6275e6c5cb971bed7";

     2. 設置cookie的超時。

         expires;   // 設置cookie的過時的時間

         如下設置 cookie 在 365天后超時；

         var date = new Date();

         date.setTime(date.getTime()+365*24*3600*1000);

         document.cookie = ‘key:value;expires =' + date.toGMTString();

下面是設置cookie， 刪除cookie，及 獲取cookie的封裝代碼以下：

// 獲取全部的cookies
function getCookies() {
    var allCookies = document.cookie;
    return decodeURIComponent(allCookies);
}
// 獲取指定的cookie
function getOneCookie(name) {
    var allCookies = document.cookie.split(";");
    for(var i = 0, ilen = allCookies.length; i < ilen; i++) {
        var temp = allCookies[i].split("=");
        if($.trim(decodeURIComponent(temp[0])) == name) {
            return decodeURIComponent(temp[1]);
         }
    }
    return -1;
}
// 添加cookie 有效期是一年
function addCookie(name,value,expires,path,domain,secure) {
    var curCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
    if(expires instanceof Date) {
        curCookie += ';expires =' + expires.toGMTString();
    }else {
        var date = new Date();                
        date.setTime(date.getTime()+365*24*3600*1000);
        curCookie += ';expires =' + date.toGMTString();
    }
    if(path) {
        curCookie += "; path=" + path;
    }
    if(domain) {
        curCookie += "; domain=" +domain;
    }
    if(secure) {
        curCookie += "; secure";
    }
    document.cookie = curCookie;
 }
 // 刪除cookie 
 function removeCookie(name,path,domain,secure) {
     addCookie(name,"",new Date(0),path,domain,secure);
 }

Demo實踐：

     下面咱們來作一個小需求，好比一個登錄頁面，有 有戶名，密碼，記住密碼，及顯示cookie和刪除cookie按鈕。當我點擊記住密碼的時候，那麼當我第重啓開頁面時候，只要輸入用戶名，密碼會自動填充，固然咱們也能夠點擊刪除cookie按鈕進行刪除，以下代碼：

HTML代碼：

<h2>cookie介紹</h2>
<p>
    <label>用戶名:</label>
    <input type="text" class="userName" id="userName"/>
</p>
<p>
    <label>密碼:</label>
    <input type="password" id="password">
</p>
<p>
    <label>記住密碼:</label>
    <input type="checkbox" id="remember"/>
</p>
<input value="刪除" type="button" id="delCookie">  
<input type="button" value="顯示cookie" id="showpassword">

JS代碼以下：

<script>
        // 獲取全部的cookies
        function getCookies() {
            var allCookies = document.cookie;
            return allCookies;
        }
        // 獲取指定的cookie
        function getOneCookie(name) {
            var allCookies = document.cookie.split(";");
            for(var i = 0, ilen = allCookies.length; i < ilen; i++) {
                var temp = allCookies[i].split("=");
                if(temp[0] == decodeURIComponent(name)) {
                    return decodeURIComponent(temp[1]);
                }
            }
            return -1;
        }
        // 添加cookie 有效期是一年
        function addCookie(name,value,expires,path,domain,secure) {
            var curCookie = encodeURIComponent(name) + '=' + encodeURIComponent(value);
            if(expires instanceof Date) {
                curCookie += ';expires =' + expires.toGMTString();
            }else {
                var date = new Date();
                date.setTime(date.getTime()+365*24*3600*1000);
                curCookie += ';expires =' + date.toGMTString();
            }
            if(path) {
                curCookie += "; path=" + path;
            }
            if(domain) {
                curCookie += "; domain=" +domain;
            }
            if(secure) {
                curCookie += "; secure";
            }
            document.cookie = curCookie;
        }
        // 刪除cookie 
        function removeCookie(name,path,domain,secure) {
            addCookie(name,"",new Date(0),path,domain,secure);
        }
        
        $("#userName").unbind('blur').bind('blur',function(){
              var val = $(this).val();
              if(val) {
                 var curCookie = getOneCookie(val);
                 if(curCookie != -1) {
                    $("#password").val(curCookie);
                 }
              }
        });
        // 記住密碼
        $("#remember").unbind('click').bind('click',function(){
            if(document.getElementById("remember").checked) {
                if($("#userName").val() && $("#password").val()) {
                    addCookie($("#userName").val(),$("#password").val());  
                    alert("Saved!");
                }
                  
            }
        });
        // 刪除cookie
        $("#delCookie").unbind('click').bind('click',function() {
            if($("#userName").val()) {
                removeCookie($("#userName").val());
                alert(getCookies());
            }else {
                alert("用戶名爲空");
            }
        });

        // 顯示cookie
        $("#showpassword").unbind('click').bind('click',function(){
            if($("#userName").val()) {
                var curCookie = getOneCookie($("#userName").val());
                if(curCookie != -1) {
                    alert(curCookie);
                }else {
                    alert("沒有cookie");
                }
                
            }else {
                alert("沒有cookie");
            } 
        });
    </script>

效果以下：

使用cookie的demo 點擊我 進行查看效果；

三：IE用戶數據；

    在IE5.0中，微軟經過一個自定義行爲引入了持久化用戶數據的概念，用戶數據容許每一個文檔最多128kb的數據，每一個域名最多1MB的數據，要使用持久化數據，首先必須以下所示,使用css在某個元素上指定userData行爲：

<div style="behavior:url(#default#userData)" id="dataStore">IE用戶數據</div>

針對IE有以下使用方法：

1. getAttribute(「key」) 獲取指定的屬性值。

2. load(object) 從 userData 存儲區載入存儲的對象數據。

3. removeAttribute(「key」) 移除對象的指定屬性。

4. save(object) 將對象數據存儲到一個 userData 存儲區。

5. setAttribute(「key」,」value」) 設置指定的屬性值。

咱們繼續作一個demo來演示下在IE瀏覽器下的存儲的demo。

HTML代碼以下：

<div style="behavior:url(#default#userData)" id="dataStore">IE用戶數據</div>

<input value="IE下保存數據" type="button" id="IESave"> 

<input type="button" value="IE下獲取數據" id="IEGet">

<input type="button" value="IE下刪除數據" id="IERemove">

JS代碼以下：

var dataStore = document.getElementById("dataStore");
$("#IESave").click(function(e){
    dataStore.setAttribute("name","tugenhua");
    dataStore.setAttribute("book",'111111');
    dataStore.save("bookInfo");
});
// IE下獲取數據
$("#IEGet").click(function(){
    dataStore.load("bookInfo");
    alert(dataStore.getAttribute("name"));
    alert(dataStore.getAttribute("book"));
});

// IE下刪除數據 
$("#IERemove").click(function(){
    dataStore.removeAttribute("name");
    dataStore.removeAttribute("book");
    dataStore.save("bookInfo");
});

IE瀏覽器下的demo以下：

 使用IE瀏覽器下查看效果 請點擊我！！

四：sessionStorage 和 localStorage 

   Html5新增了兩個本地存儲數據，分別是sessionStorage 和 localStorage.

   瀏覽器支持程度以下：

   

注意：IE8 及 以上都支持 web storage。

   sessionStorage: 將數據保存在session對象中，所謂session，指用戶瀏覽某個網站時，從進入網站到瀏覽器關閉的這段時間，也就是用戶瀏覽這個網站所花費的時間。

        生命週期：指只在當前的窗口有效，打開一個新的同源窗口，或者說重啓瀏覽器都失效。

        數據大小：能夠保存5MB甚至更多。

   localStorage: 將數據保存在客戶端本地的硬件設備(一般是指硬盤，但也能夠是其餘硬件設備)，即便瀏覽器被關閉了，該數據依然存在，下次打開瀏覽器訪問網站時仍然能夠繼續使用。可是，數據保存是按不一樣的瀏覽器分別進行的，也就是說，若是打開別的瀏覽器，是讀取不到在這個瀏覽器中保存的數據的。

      生命週期：數據一直保存在硬盤中。持久性保存(可是不一樣的瀏覽器保存的數據，是不能通用的)。

     數據大小：能夠保存5MB甚至更多的數據。

    1. cookie 與 sessionStorage 及 localStorage的區別；   

        共同點：都是在客戶端存儲數據，且是同源的。

    區別：

1. 存儲大小不同；cookie存儲數據最大隻能爲4kb，而sessionStorage與localStorage能夠保存5MB甚至更多數據。
2. Cookie數據始終在同源的http請求中攜帶，即cookie在瀏覽器與服務器之間來回傳遞，而sessionStorage與localStorage不會自動發給服務端，僅在本地保存。
3. 數據有效期不一樣；sessionStorage僅在當前瀏覽器窗口未關閉以前有效(同源的新窗口不生效)，localStorage僅在當前的瀏覽器下永久生效(不一樣的瀏覽器不能共享數據)，無論關閉了 從新打開的 仍是生效的。Cookie只在設置的cookie過時時間以前一直有效，即便窗口或者瀏覽器關閉，或者打開新的同源窗口。
4. 做用域不一樣；sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面，localStorage在全部的同源窗口中都是共享的(只在相同的瀏覽器下)，cookie在全部的同源窗口都是共享的(僅在同一個瀏覽器中)。

      SessionStorage與LocalStorage他們都擁有相同的方法；

      1. setItem存儲value

         用法：.setItem( key, value)，代碼以下：

         localStorage.setItem(key,value)：將value存儲到key字段

      2. getItem獲取value

          用法：.getItem(key) 代碼以下：

          localStorage.getItem(key):獲取指定key本地存儲的值

      3. removeItem刪除key

          用法：.removeItem(key)，代碼以下：

          localStorage.removeItem(key):刪除指定key本地存儲的值

      4. clear清除全部的key/value

          用法：.clear()，代碼以下：

          localStorage.clear();  清除全部的數據(firefox除外)

      它將刪除全部同源的本地存儲的localStorage數據

      而對於Session Storage，它只清空當前會話存儲的數據。

      sessionStorage也有上面同樣的方法；

下面咱們來使用sessionStorage及 localStorage 來練習下，來作個demo。以下：

HTML代碼以下：

<h1>web Storage實列</h1>
<p id="msg"></p>
<input type="text" id="input" />
<input type="button" value="保存數據" id="saveData"/>
<input type="button" value="讀取數據" id="readData"/>
<input type="button" value="刪除數據" id="removeData"/>
<input type="button" value="清除全部的數據" id="clearData"/>

    頁面上一個input輸入框，當我點擊 保存數據 按鈕後 分別使用sessionStorage和localStorage 把值保存起來，當我點擊 讀取數據 按鈕後 讀取數據，分別在不一樣的瀏覽器或者新的同源窗口 或者關閉瀏覽器窗口 從新打開新窗口 來分別看看之間的區別，區別上面已經總結了，下面咱們來看看JS代碼以下：

<script>
        // sessionStorage demo
        $("#saveData").unbind('click').bind('click',function(){
            var inputVal = $("#input").val();
            sessionStorage.setItem("message",inputVal);
            //localStorage.setItem("message",inputVal);
        });
        $("#readData").unbind("click").bind('click',function(){
            var msg = sessionStorage.getItem("message");
            //var msg = localStorage.getItem("message");
            $("#msg").html(msg);
        });
        $("#removeData").unbind('click').bind('click',function(){
            sessionStorage.removeItem("message");
            //localStorage.removeItem("message");
        });
        $("#clearData").unbind('click').bind('click',function(){
            sessionStorage.clear();
            //localStorage.clear();
        });
</script>

如上的代碼，咱們如今繼續來看看效果以下：

使用sessionStorage效果請點擊： 

使用localStorage效果請點擊：

咱們還能夠作一點複雜的應用，好比以下一個表格有一些字段，好比姓名，email，tel，及備註字段，咱們先保存到本地去，而後根據姓名這個字段進行搜索就能夠搜索到數據到，咱們能夠稱爲這是簡單的本地數據庫，以下代碼：

HTML:

<table>
    <tr>
        <td>姓名：</td>
        <td>
            <input type="text" id="name"/>
        </td>
    </tr>
    <tr>
        <td>EMALL：</td>
        <td>
            <input type="text" id="email"/>
        </td>
    </tr>
    <tr>
        <td>電話號碼：</td>
        <td>
            <input type="text" id="tel"/>
        </td>
    </tr>
    <tr>
        <td>備註：</td>
        <td>
            <input type="text" id="memo"/>
        </td>
    </tr>
    <tr>
        <td>保存</td>
        <td>
           <input type="button" id="save" value="保存"/>
        </td>
    </tr>
</table>
     <p>
         檢索：<input type="text" id="file"/>
         <input type="button" id="find" value="檢索"/>
     </p>
     <p id="msg"></p>

JS代碼以下：

//  保存數據
$("#save").unbind('click').bind('click',function(){
     var data = new Object;
     data.name = $("#name").val();
     data.email = $("#email").val();
     data.tel = $("#tel").val();
     data.memo = $("#memo").val();
     var str = JSON.stringify(data);
     localStorage.setItem(data.name,str);
     alert("數據已經保存");
 });

 // 檢索數據
 $("#find").unbind('click').bind('click',function(){
      var find = $("#file").val();
      var str = localStorage.getItem(find);
      var data = JSON.parse(str);
      var result = "姓名：" + data.name + "</br>";
          result += "Email: " + data.email + "</br>";
          result += "tel:" + data.tel + "</br>";
          result += "備註：" + data.memo + "</br>";
      $("#msg").html(result);
  });

demo以下效果：

請點擊查看：

五：window.name 實現跨域數據傳輸。

     Window.name 中的name值在不一樣的頁面(甚至不一樣的域名)加載後依舊存在，而且數據量能夠達到2MB。

     Window.name 數據傳輸的基本原理：

1. 同域下：Name在瀏覽器環境中是一個全局/window對象的屬性，且當在ifrmae中加載頁面時，name的屬性值依舊保持不變。

          好比咱們在同域下abc.example.com下 有2個頁面 app.html 和 data.html

          App.html頁面代碼嵌套一個iframe data.html頁面，代碼以下：

          <iframe src="http://abc.example.com/demo/tugenhua0707/storage/data.html" id="iframe"></iframe>

          其中data.html 頁面 使用一個window.name = 「111」；來保存數據。

      如今咱們接下來在app.html頁面 如何來調用同域下的data.html下的window.name的數據，首先咱們先要獲取到這個iframe，而後判斷iframe是否加載完，加載完後就獲取這個iframe中的window.name, 

     App.html JS的代碼以下：

function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
       iframe.attachEvent('onload',function(){
            callback && callback();
        });
     }else {
         iframe.onload = function(){
             callback && callback();
         }
     }
 }
var iframe = document.getElementById("iframe");
// 同域下
iframeIsLoad(iframe,function(){
    var data = iframe.contentWindow.name;
        alert(data);
 });

     2. 跨域下：

        如今咱們使用hosts文件來綁定2個IP 來演示下跨域的狀況，在hosts文件綁定以下：

         127.0.0.1  abc.example.com  和 127.0.0.1 def.example.com

        咱們如今在 abc.example.com 新建一個app.html頁面 裏面仍是嵌套一個 def.example.com域下的 data.html頁面，代碼以下：

     App.html代碼以下：

<iframe src="http://def.example.com/demo/tugenhua0707/storage/data.html" id="iframe"></iframe>

    若是咱們仍是和上面的方式取數據的話 明顯報錯跨域了，如今咱們是使用window.name解決跨域下數據的傳輸，那麼咱們可使用一個同域abc.example.com下的代理頁面proxy.html來作處理，經過在def.example.com域下的data.html頁面加載一個與abc.example.com同域下的proxy.html頁面， 將該目標頁面設置iframe的name屬性，由於app.html 與 proxy.html是在同一個域下，因此咱們能夠獲取到。

在app.html頁面 JS代碼以下：

function iframeIsLoad(iframe,callback){
    if(iframe.attachEvent) {
        iframe.attachEvent('onload',function(){
             callback && callback();
        });
    }else {
        iframe.onload = function(){
             callback && callback();
         }
     }
 }       
var iframe = document.getElementById("iframe");
var state = 0;
// 跨域下
iframeIsLoad(iframe,function(){
   if (state === 1) {
        var data = iframe.contentWindow.name;    // 讀取數據
        alert(data);    //彈出111
   } else if (state === 0) {
        state = 1;
        iframe.contentWindow.location = "http://abc.example.com/demo/tugenhua0707/storage/proxy.html";    // 設置的代理文件
   }  
});

固然如上：咱們若是name數據已經拿到了的話，之後不須要的話，咱們能夠銷燬掉，清空等操做。