localStorage、sessionStorage和cookie的區別

　　本地客戶端（瀏覽器）查看三者信息：

 

HTML4的本地存儲：cookie

　　瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端上的方式，能夠利用cookie，session等根服務端進行數據交互。

1、cookie 和 session

　　cookie 和 session都是用來跟蹤瀏覽器用戶身份的會話方式。

區別：

1. 保持狀態：cookie保存在客戶端（瀏覽器），session保存在服務器端
2. 使用方式：
   1. cookie機制：若是不在瀏覽器中設置過時時間，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie稱爲會話cookie。若是在瀏覽器中設置了cookie的過時時間，cookie被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，知道過時時間結束才消失。                                                                               Cookie是服務器發給客戶端的特殊信息，cookie是以文本的方式保存在客戶端，每次請求時都會帶上它
   2. session機制：當服務器收到請求須要建立session對象時，首先會檢查客戶端請求中是否包含sessionid。若是有sessionid，服務器將根據該id放回對應的session對象。若是客戶端請求中沒有sessionid，服務器會建立新的session對象，並把sessionid在本次響應中返回給客戶端。同程使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。若是用戶禁用cookie，則要使用URL重寫，能夠經過response.encodeURL(url)進行實現；API對encodeURL的結束爲，當瀏覽器支持Cookie時，url不作任何處理；當瀏覽器不支持Cookie的時候，將會重寫URL將SessionID拼接到訪問地址後。
   3. 存儲內容：cookie只能保存字符串類型，以文本的方式；session經過相似於Hashtable的數據結構來保存，能支持任何類型的對象（session中可包含有多個對象）
   4. 存儲的大小：cookie：單個cookie保存的數據不能超過4kb；session大小沒有限制
   5. 安全性：cookie：針對cookie所存在的攻擊：Cookie欺騙、Cookie截獲；session的安全性大於cookie
   6. 應用場景：

      cookie：（1）判斷用戶是否登錄過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）。若是咱們刪除cookie，則每次登陸必須重新填寫登陸的相關信息。

      　　　　（2）保存上次登陸的時間等信息。

      　　　　（3）保存上次查看的頁面

      　　　　（4）瀏覽計數

　　　　　　　　session：Session用於保存每一個用戶的專用信息，變量的值保存在服務器端，經過SessionID來區分不一樣的客戶

　　　　　　7. 缺點：cookie：（1）大小受限

　　　　　　　　　　　　　　（2）用戶能夠操做（禁用）cookie，使功能受限

　　　　　　　　　　　　　　（3）安全性較低

　　　　　　　　　　　　　　（4）有些狀態不可能保存在客戶端。

　　　　　　　　　　　　　　（5）每次訪問都要傳送cookie給服務器，浪費帶寬。

　　　　　　　　　　　　　　（6）cookie數據有路徑（path）的概念，能夠限制cookie只屬於某個路徑下。

 　　　　　　　　　session：（1）Session保存的東西越多，就越佔用服務器內存，對於用戶在線人數較多的網站，服務器的內存壓力會比較大。

　　　　　　　　　　　　　　（2）依賴於cookie（sessionID保存在cookie），若是禁用cookie，則要使用URL重寫，不安全

　　　　　　　　　　　　　　（3）建立Session變量有很大的隨意性，可隨時調用，不須要開發者作精確地處理，因此，過分使用session變量將會致使代碼不可讀並且很差維護。

 

HTML5的本地存儲：Web Storage  

　　HTML5 中與本地存儲相關的兩個重要內容：Web Storage 和本地數據庫。其中，Web Storage存儲機制是對HTML4中cookie存儲機制的一個改善。因爲cookie存儲機制有不少缺點，HTML5再也不使用它，轉而使用改良後的Web Storage存儲機制。本地數據庫是HTML5中新增的一個功能，使用它能夠在客戶端本地創建一個數據庫，本來必須保存在服務器端數據庫中的內容如今能夠直接保存在客戶端本地了，這大大減輕了服務器端的負擔，同時也加快了訪問數據的速度。

　　咱們知道，在HTML4中可使用cookie在客戶端中存儲用戶名等簡單的用戶信息，可是，經過長期的使用，使用cookie存儲痛就數據存在幾個問題：

　　　　1.大小：cookie的大小被限制在4KB

　　　　2.帶寬：cookie是隨HTTP請求一塊兒被髮送的，所以會浪費一部分發送cookie時使用的帶寬

　　　　3.複雜性：要正確的操縱cookie是很困難的

　　針對這些問題，在HTML5中，從新提供了一種在客戶端本地保存數據的功能，即Web Storage，其中提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲），Web Storage的目的是克服由cookie所帶來的的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回給服務器

Web Storage的優勢　　　

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

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

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

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

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

1、localStorage（永久保存）

　　將數據保存在session對象中。所謂session，是指用戶在瀏覽某個網站時，從進入網站到瀏覽器關閉所通過的這段時間，也就是用戶瀏覽這個網站所花費的時間。session對象能夠用來保存在這段時間內所要求保存的任何數據。

2、sessionStorage（臨時保存）

　　將數據保存在客戶端本地的硬件設備(一般指硬盤，也能夠是其餘硬件設備)中，即便瀏覽器被關閉了，該數據仍然存在，下次打開瀏覽器訪問網站時仍然能夠繼續使用。

區別：

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

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

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

　　三、存儲位置：localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊。

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

　　五、獲取方式：localStorage：window.localStorage;；sessionStorage：window.sessionStorage;。

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

 

localStorage、sessionStorage和cookie的區別（圖示）