cookie,sessionStorage,localStorage使用總結

1、cookie,sessionStorage,localStorage的共同點和區別

共同點：

都是保存在瀏覽器端，且同源的。

不一樣點：

1.cookie: 存儲在用戶本地終端上的數據。有時也用cookies,指某些網站爲了辨別用戶身份，進行session跟蹤而存儲在本地終端上的數據，一般通過加密。通常應用最典型的就是判斷註冊用戶是否已經登過該網站。cookie在瀏覽器和服務器間來回傳遞；cookie數據還有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。存儲大小限制也不一樣，cookie數據不能超過4k,同時由於每次http請求都會攜帶cookie，因此cookie只適合保存很小的數據，如會話標識。

2.sessionStorage和localStorage不會自動把數據發給服務器，僅在本地保存。sessionStorage和localStorage雖然也有存儲大小的限制，但比cookie大得多，能夠達到5M或更大。

3.數據有效期不一樣，sessionStorage:打開瀏覽器開始關閉瀏覽器消失，天然也就不可能持久保持；localStorage：始終有效，窗口或瀏覽器關閉也一直保存，永久存儲除非手動刪除，所以用做持久數據；cookie能夠設置存儲時間，只在cookie過時時間以前有效，即便窗口或瀏覽器關閉。

 

4.做用域不一樣：sessionStorage不在不一樣的瀏覽器窗口中共享，即便是同一個頁面；localStorage在全部同源窗口中都是共享的；cookie也是在全部同源窗口中都是共享的。WebStorage支持事件通知機制，能夠將數據更新的通知發送給監聽者。WebStorage的api接口使用更方便。                      

2、什麼是localStorage、sessionStorage?

所謂的WebStorage指的是客戶端存儲,在這裏指的是瀏覽器端存儲,好比在網站上自動登錄這些功能,其實就是把一些少許的數據存儲在瀏覽器等客戶端中,這樣能夠減小不必的請求到服務器,下降服務器的壓力,給用戶提供更好的體驗.

WebStorage的目的是克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器。webstorage兩個主要目標： （1）提供一種在cookie以外存儲會話數據的路徑。（2）提供一種存儲大量能夠跨會話存在的數據的機制。HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）。

1.生命週期：localStorage的生命週期是永久的，關閉頁面或瀏覽器以後localStorage中的數據也不會消失。除非手動刪除數據，不然數據永遠不會消失。

                    sessionStorage的生命週期是僅在當前會話下有效。sessionStorage引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的窗口中始終存在的數據。只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一個頁面，數據依然存在。可是，sessionStorage在關閉了瀏覽器窗口後就會被銷燬。同時獨立的打開同一個窗口同一個頁面，sessionStorage也是不同的。

2.存儲大小：localStorage和sessionStorage的存儲數據大小通常都是：5MB

3.存儲位置：都保存在客戶端，不與服務器進行交互通訊。

4.存儲內容類型：localStorage和sessionStorage只能存儲字符串類型，對於複雜的對象可使用ECMAScript提供的JSON對象的stringify和parse來處理。

5.獲取方式：localStorage:window.localStorage；sessionStorage: window.sessionStorage。

6.應用場景：localStorage:經常使用於長期登陸（+判斷用戶是否已登陸），適合長期保存在本地的數據。sessionStorage:敏感帳號一次性登陸。

WebStorage的優勢：

（1）存儲空間更大：cookie爲4KB，而WebStorage是5MB；

（2）節省網絡流量：WebStorage不會傳送到服務器，存儲在本地的數據能夠直接獲取，也不會像cookie同樣美詞請求都會傳送到服務器，因此減小了客戶端和服務器端的交互，節省了網絡流量；

（3）對於那種只須要在用戶瀏覽一組頁面期間保存而關閉瀏覽器後就能夠丟棄的數據，sessionStorage會很是方便；

（4）快速顯示：有的數據存儲在WebStorage上，再加上瀏覽器自己的緩存。獲取數據時能夠從本地獲取會比從服務器端獲取快得多，因此速度更快；

（5）安全性：WebStorage不會隨着HTTP header發送到服務器端，因此安全性相對於cookie來講比較高一些，不會擔憂截獲，可是仍然存在僞造問題；

（6）WebStorage提供了一些方法，數據操做比cookie方便；

　　　　setItem (key, value) ——  保存數據，以鍵值對的方式儲存信息。

      　　 getItem (key) ——  獲取數據，將鍵值傳入，便可獲取到對應的value值。

        　　removeItem (key) ——  刪除單個數據，根據鍵值移除對應的信息。

        　　clear () ——  刪除全部的數據

        　　key (index) —— 獲取某個索引的key

3、localStorage的優點與侷限

優點：

1.localStorage拓展了cookie的4k限制

2.localStorage能夠將第一次請求的數據直接存儲到本地，這個至關於一個5M大小的針對於前端頁面的數據庫，相比於cookie能夠節約帶寬，可是這個倒是隻有在高版本的瀏覽器中才支持的。

侷限：

1.瀏覽器的大小不統一，而且在IE8以上的IE版本才支持localStorage這個屬性。

2.目前全部的瀏覽器中都會把localStorage的值類型限定爲string類型，這個在對咱們平常比較常見的JSON對象類型須要一些轉換。

3.localStorage在瀏覽器的隱私模式下面是不可讀取的。

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

5.localStorage不能被爬蟲抓取到。

localStorage與sessionStorage的惟一一點區別就是localStorage屬於永久性存儲，而sessionStorage屬於當回話結束的時候，sessionStorage中的鍵值對會被清空。

4、localStorage的使用

localStorage的瀏覽器支持狀況：

這裏要特別聲明一下，若是是使用IE瀏覽器的話，那麼就要UserData來做爲存儲，這裏主要講解的是localStorage的內容。

首先在使用localStorage的時候，咱們須要判斷瀏覽器是否支持localStorage這個屬性

if(!window.localStorage){
                alert("瀏覽器支持localStorage");
                return false;
}else{
     //主邏輯業務
}

localStorage的寫入，localStorage的寫入有三種方法。

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=2;
            //寫入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
        }

 

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

最後在控制檯上面打印出來的結果是：

剛剛存進去的是int類型，可是打印出來倒是string類型，這個與localStorage自己的特色有關，localStorage只支持string類型的存儲。

localStorage的讀取

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=2;
            //寫入c字段
            storage.setItem("c",3);
            console.log(typeof storage["a"]);
            console.log(typeof storage["b"]);
            console.log(typeof storage["c"]);
            //第一種方法讀取
            var a = storage.a;
            console.log(a);
            //第二種方法讀取
            var b = storage["b"];
            console.log(b);
            //第三種方法讀取
            var c = storage.getItem("c");
            console.log(c);
        }

這裏面是三種對localStorage的讀取，其中官方推薦的是getItem\setItem這兩種方法對其進行存取，localStorage就是至關於一個前端的數據庫的東西，數據庫主要是增刪查改這四個步驟，這裏的讀取和寫入就至關於增、查的這兩個步驟。

下面來講一說localStorage的刪、改這兩個步驟

改這個步驟比較好理解，思路跟從新更改全局變量的值同樣，以下

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            //寫入a字段
            storage["a"]=1;
            //寫入b字段
            storage.b=2;
            //寫入c字段
            storage.setItem("c",3);
            console.log(storage.a);

            storage.a = 4;
            console.log(storage.a);

        }

localStorage的刪除

1.將localStorage的全部內容清除

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            console.log(storage);
            storage.clear();
            console.log(storage);
        }

2.將localStorage中的某個鍵值對刪除

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            console.log(storage);
            storage.removeItem("a");
            console.log(storage.a);
        }

控制檯查看結果：

localStorage的鍵獲取

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            storage.a = 1;
            storage.setItem("c",3);
            for(var i=0;i<storage.length;i++){
                var key=storage.key(i);
                console.log(key);
            }
        }

使用key()方法，向其中輸入索引便可獲取對應的鍵

4、localStorage的其餘注意事項

通常咱們會將JSON存入localStorage中，可是在localStorage會自動將localStorage轉換成字符串形式，這時咱們可使用JSON.stringify()這個方法，來將JSON轉換成爲JSON字符串。

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            var data = {
                name: 'zhaosijia',
                sex: 'woman',
                hobby: 'program'
            };
            var d = JSON.stringify(data);
            storage.setItem("data",d);
            console.log(storage.data);
        }

讀取以後要將JSON字符串轉換成爲JSON對象，使用JSON.parse()方法

if(window.localStorage){
            alert("瀏覽器支持localStorage");
            return false;
        }else{
            var storage = window.localStorage;
            var data = {
                name: 'zhaosijia',
                sex: 'woman',
                hobby: 'program'
            };
            var d = JSON.stringify(data);
            storage.setItem("data",d);
            //將JSON字符串轉換成爲JSON對象輸出
            var json = storage.getItem("data");
            var jsonObj = JSON.parse(json);
            console.log(storage.data);
        }

打印出來是Object對象，另外還有一點要注意的是，其餘類型讀取出來也要進行轉換。