Cookie、SessionStorage、LocalStorage應用及區別

1、什麼是Cookie？

Cookie是小量信息，由網絡服務器發送出來以存儲在網絡瀏覽器上，從而下次這位獨一無二的訪客又回到該網絡服務器時，可從該瀏覽器讀回此信息。因此它具備必定得信息存儲功能，可是並非什麼都存放在cookie中。

2、Cookie的做用

Cookies最典型的應用是斷定註冊用戶是否已經登陸網站，用戶可能會獲得提示，是否在下一次進入此網站時保留用戶信息以便簡化登陸手續，這些都是Cookies的功用。
固然這些信息也並非一直存放與你的瀏覽器中，Cookie有一個存放週期，能夠經過代碼本身決定存放週期，通常來講，咱們都是在退出登錄的時候刪除Cookie爲了確保用戶信息的安全。

3、如何應用Cookie

因爲Cookie沒有提供專門的API接口，因此須要咱們本身來實現對於Cookie的操做:

class CookieHandle{
    setCookie(name,value,saveTime){
        let exdate = new Date();
        exdate.setDate(exdate.getDate()+saveTime)  //設置存儲週期
        document.cookie = name + "=" + escape(value) + ((saveTime == null) ？ "" : ";expires="+exdate.toGMTString()) //設置cookie，並對信息進行一次加密
    }
    getCookie(name){
        let cookie = document.cookie;
        if(cookie.length>0){
            cookie_start = cookie.indexOf(name + "=") //經過name找到咱們須要cookie是否存在
            if(cookie_start>-1){
                cookie_start = cookie_start + name.length + 1;
                cookie_end = cookie.indexOf(';',cookie_start)   //查詢cookie結尾的位置
                if(cookie_end == -1){
                    cookie_end = cookie.length
                }
                return unescape(cookie.substring(cookie_start,cookie_end));  //返回找到的cookie的值而且解碼
            }
        }
    }
    delCookie(name){
        document.cookie = name + '=0;expires=' + new Date(0).toUTCString()
    }
}

4、各大瀏覽器對於Cookie的限制

一、瀏覽器容許每一個域名所包含的cookie數：

　　Microsoft指出InternetExplorer8增長cookie限制爲每一個域名50個，但IE7彷佛也容許每一個域名50個cookie。

　　Firefox每一個域名cookie限制爲50個。

　　Opera每一個域名cookie限制爲30個。

　　Safari/WebKit貌似沒有cookie限制。可是若是cookie不少，則會使header大小超過服務器的處理的限制，會致使錯誤發生。

　　注：「每一個域名cookie限制爲20個」將再也不正確！

二、當不少的cookie被設置，瀏覽器如何去響應。

　　除Safari（能夠設置所有cookie，無論數量多少），有兩個方法：

　　最少最近使用（leastrecentlyused(LRU)）的方法：當Cookie已達到限額，自動踢除最老的Cookie，以使給最新的Cookie一些空間。Internet Explorer和Opera使用此方法。

　　Firefox很獨特：雖然最後的設置的Cookie始終保留，但彷佛隨機決定哪些cookie被保留。彷佛沒有任何計劃（建議：在Firefox中不要超過Cookie限制）。

三、不一樣瀏覽器間cookie總大小也不一樣：

　　Firefox和Safari容許cookie多達4097個字節，包括名（name）、值（value）和等號。

　　Opera容許cookie多達4096個字節，包括：名（name）、值（value）和等號。

　　Internet Explorer容許cookie多達4095個字節，包括：名（name）、值（value）和等號。

      注：多字節字符計算爲兩個字節。在全部瀏覽器中，任何cookie大小超過限制都被忽略，且永遠不會被設置。

來源：https://www.cnblogs.com/henry...

---

1、什麼是Web Storage

它包含了兩種機制：

• sessionStorage 爲每個給定的源（givenorigin）維持一個獨立的存儲區域，該存儲區域在頁面會話期間可用（即只要瀏覽器處於打開狀態，包括頁面從新加載和恢復）。
• localStorage 一樣的功能，可是在瀏覽器關閉，而後從新打開後數據仍然存在。

請注意這裏是sessionStorage而不是session，這二者有着千差萬別。

2、Web Storage的做用

存儲一些須要頁面共享的信息，而且不須要向後臺發送的信息。

3、如何使用Web Storage

localStorage.setItem('name', 'Tom'); //在localStorage中寫入鍵名爲name，值爲Tom的信息
let cat = localStorage.getItem("name"); //獲取localStorage中鍵名爲name的值。
localStorage.removeItem("name");  //移除name。


sessionStorage.setItem('key', 'value'); // 保存數據到sessionStorage
let data = sessionStorage.getItem('key'); // 從sessionStorage獲取數據
sessionStorage.removeItem('key');  // 從sessionStorage刪除保存的數據
sessionStorage.clear();  // 從sessionStorage刪除全部保存的數據

4、各大瀏覽器Web Storage的存儲限制

IE 9          > 4999995 + 5 = 5000000
firefox 22.0 > 5242875 + 5 = 5242880
chrome  28.0  > 2621435 + 5 = 2621440
safari  5.1   > 2621435 + 5 = 2621440
opera   12.15 > 5M （超出則會彈出容許請求更多空間的對話框）

來源：https://blog.csdn.net/cengjin...

---

1、Cookie、SessionStorage、LocalStorage的區別
一、Web Storage的概念和cookie類似，區別是它是爲了更大容量存儲設計的，cookie的大小是受限的，而且每次請求一個新的頁面的時候cookie都會被髮送過去，這樣無形中浪費了帶寬，另外cookie還須要指定做用域，不可跨域調用。
二、web storage擁有setItem,getItem,removeItem,clear等方法，不像cookie須要前端開發者本身封裝setCookie，getCookie。
三、cookie的做用是與服務器進行交互，做爲http規範的一部分而存在的，而web Storage僅僅是爲了在本地「存儲」數據而生
四、sessionStorage、localStorage、cookie都是在瀏覽器端存儲的數據，其中sessionStorage的概念很特別，引入了一個「瀏覽器窗口」的概念，sessionStorage是在同源的同學口中，始終存在的數據，也就是說只要這個瀏覽器窗口沒有關閉，即便刷新頁面或進入同源另外一個頁面，數據仍然存在，關閉窗口後，sessionStorage就會被銷燬，同時「獨立」打開的不一樣窗口，即便是同一頁面，sessionStorage對象也是不一樣的。
來源：https://blog.csdn.net/ruby_xc...