本地存儲

    前端本地存儲方式有cookie和HTNL5的web Storage。

1.cookie

在h5以前，存儲主要用的是cookie。cookie會隨着每次http請求頭信息一塊兒發送，無形中增長了網絡流量，另外，cookie能存儲的數據容量有限，根據瀏覽器類型不一樣而不一樣，IE6大約只能存儲2K，其他的爲4K。cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

Cookie的結構：

Name = str(存儲在cookie中的字符串，鍵和值都必須通過URL編碼);  expires = GMT time(失效時間); domain=.wrox.com(域名); path =/(對於指定域中的那個路徑發送cookie); secure(安全標誌，只有在SSL鏈接才能發送cookie)

cookie的存取方法

存/取:賦值（鍵值對）

document.cookie = "鍵=值";  

刪：（設置存儲有效時長爲過去時間）

cookie的優缺點

優勢：（1）可控制過時時間，使其不會長期有效（2）可擴展、可用性比較好（3）可加密減小cookie被破解的可能性

缺點：（1）數量和長度有限制，最多20條，最長不能超過40k（2）在請求頭上帶着數據安全性差

cookie的應用場景

主要應用：購物車、客戶端登陸

封裝cookie讀、寫和刪除代碼

讀：獲取URL編碼後cookie值開始和結束的位置；

寫：將鍵值編碼後拼接後面的選項；

刪除：設置相同的鍵名，路徑，域名，安全屬性。並把值設爲「」空字符串，expries設爲過去時間。

<script type="text/javascript">
         var cookieUtil = {};
         cookieUtil.set = function(name, value, expires, path, domain, secure) {
                   var cookieText = encodeURIComponent(name) + "=" + encodeURIComponent(value);
                   if(expires instanceof Date){
                            cookieText += ";expires" + expires.toGMTString();
                   }
                   if(path){
                            cookieText += ";path=" + path;
                   }
                   if(domain){
                            cookieText += ";domain" + domain;
                   }
                   if(secure){
                            cookieText += ";secure";
                   }
                   document.cookie = cookieText;
         };
         cookieUtil.get = function(name) {
     var cookieName = encodeURIComponent(name) + "=",
         cookieStart = document.cookie.indexof(cookieName),
         cookieValue = null;
           if(cookieStart > -1){
             var cookieEnd = document.cookie.indexof(";", cookieStart);
             if(cookieEnd = -1){
                       cookieEnd = document.cookie.length;
             }
             cookieValue = decodeURIComponent(document.cookie.subString(cookieStart+cookieName.length, cookieEnd));
           }
           return cookieValue;
         };
         cookieUtil.delet = function(name, path, dimain, secure){
                   this.set(name, "", new Date(0), path, domain, secure);
         }
</script>

2.localStorage

localStorage（本地存儲）,將數據保存在客戶端本地的硬件設備，即瀏覽器被關閉後，該數據仍然存在。（一般只能夠長期存儲數據，沒有時間限制。 localStorage中通常瀏覽器支持的是5M大小，這個在不一樣的瀏覽器中localStorage會有所不一樣）

使用方法

    localStorage.setItem("key","value");//存儲

    localStorage.getItem(key);//按key進行取值

    localStorage.removeItems(key);//按key單個刪除

    localStorage.clear();//刪除所有數據

    localStorage.length;//得到數據的數量

    localStorage.valueOf();//獲取所有值

優缺點

優勢：

localStorage拓展了cookie的4k限制；

localStorage能夠將第一次請求的5M大小數據直接存儲到本地，相比於cookie能夠節約帶寬；

localStorage的使用也是遵循同源策略的，因此不一樣的網站直接是不能共用相同的localStorage；

缺點：

須要手動刪除，不然長期存在；

瀏覽器大小不一，版本的支持也不同；

localStorage只支持string類型的存儲，JSON對象須要轉換；

localStorage本質上是對字符串的讀取，若是存儲內容多的話會消耗內存空間，會致使頁面變卡；

特色：

同源策略限制、只在本地存儲、永久保存、同瀏覽器共享。

應用場合

1) 數據比較大的臨時保存方案。如在線編輯文章時的自動保存。

2) 多頁面訪問共同數據。sessionStorage只適用於同一個標籤頁，localStorage相比而言能夠在多個標籤頁中共享數據。

3.sessionStorage

sessionStorage（會話存儲），用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所經歷的這段時間內，瀏覽器能夠保存這段時間內所要求保存的任何數據。（建立另外一個頁面時同時可使用，關閉瀏覽器以後數據就會消失。）

使用方法，同localStorage

特色

同源策略限制。若想在不一樣頁面之間對同一個sessionStorage進行操做，這些頁面必須在同一協議、同一主機名和同一端口下。

單標籤頁限制。sessionStorage操做限制在單個標籤頁中，在此標籤頁進行同源頁面訪問均可以共享sessionStorage數據。

只在本地存儲。seesionStorage的數據不會跟隨HTTP請求一塊兒發送到服務器，只會在本地生效，並在關閉標籤頁後清除數據

存儲方式。seesionStorage的存儲方式採用key、value的方式。value的值必須爲字符串類型(傳入非字符串，也會在存儲時轉換爲字符串。)。

存儲上限限制：不一樣的瀏覽器存儲的上限也不同，但大多數瀏覽器把上限限制在5MB如下。

應用場合

sessionStorage 很是適合單頁應用程序，能夠方便在各業務模塊進行傳值。

4.localStorange與sessionStorage的區別

相同點：

存值都是以鍵值對形式存在，值也是存入字符串類型（若是是對象，就序列化之後再存入）；

localStorage和sessionStorage使用時使用相同的API；

都是用來存儲客戶端臨時信息的對象；

不一樣點：

H5的兩種存儲技術的最大區別就是生命週期。

localStorage是本地存儲，存儲期限不限；

sessionStorage是會話存儲，頁面關閉數據就會丟失。

5.cookies，sessionStorage 和 localStorage 的區別

概念：

cookie是網站爲了標示用戶身份而儲存在用戶本地終端（Client Side）上的數據（一般通過加密）。

sessionStorage和localStorage是web存儲機制，將數據存儲在本地客戶端上，無須持續的將數據發送給瀏覽器，存儲大量能夠跨瀏覽器的數據機制。

載體：

cookie數據始終在同源的http請求中攜帶（即便不須要），記會在瀏覽器和服務器間來回傳遞，浪費帶寬。

sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。

方法：

Web Storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。

做用：Cookie的做用是與服務器進行交互，做爲HTTP規範的一部分而存在 ，而Web Storage僅僅是爲了在本地「存儲」數據而生。

存儲大小：

    cookie數據大小不能超過4k。

    sessionStorage和localStorage 雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

有期時間：

    localStorage    存儲持久數據，瀏覽器關閉後數據不丟失除非主動刪除數據；

    sessionStorage  數據在當前瀏覽器窗口關閉後自動刪除。

    cookie          設置的cookie過時時間以前一直有效，即便窗口或瀏覽器關閉