淺談cookie，session和localStorage，sessionStorage的區別

寫在前面

既然是淺談，就不會詳細從底層原理解釋這幾個的區別，就簡單地聊一下，這幾個的區別，優缺點，應用場景

cookie和session

瀏覽器的緩存機制提供了能夠將用戶數據存儲在客戶端上的方式，能夠利用cookie和session跟服務端進行數據交互。
cookie和session都是用來跟蹤瀏覽器用戶身份的會話方式

cookie和session的區別

1.使用方式

cookie機制：若是不在瀏覽器中設置過時事件，cookie被保存在內存中，生命週期隨瀏覽器的關閉而結束，這種cookie簡稱爲會話cookie。若是在瀏覽器中設置了cookie的過時事件，cookie會被保存在硬盤中，關閉瀏覽器後，cookie數據仍然存在，直到過時事件結束才消失。cookie是服務端發給客戶端的特殊信息，cookie是以文本的方式保存在客戶端，每次請求時都帶上它

session機制：當服務器收到請求須要建立session對象時，首先會檢查客戶端請求中是否包含sessionid。若是有sessionid，服務器將根據該id返回對應session對象。若是客戶端請求中沒有sessionid，服務器會建立新的session對象，並把sessionid在本次響應中返回給客戶端。一般使用cookie方式存儲sessionid到客戶端，在交互中瀏覽器按照規則將sessionid發送給服務器。若是用戶禁用cookie，則要使用URL重寫，能夠經過response.encodeURL(url)進行實現；API對encodeURL的結束爲，當瀏覽器支持cookie時，url不作任何處理；當瀏覽器不支持cookie的時候，將會重寫URL將sessionid拼接到訪問地址後。

2.保持狀態

cookie保存在瀏覽器端，session保存在服務器端

3.存儲的大小

單個cookie保存的數據不能超過4kb；session大小沒有限制。
session大小沒有限制。

4.存儲內容

cookie只能保存字符串類型，以文本的方式。
session經過相似與Hashtable的數據結構來保存，能支持任何類型的對象（session中可含有多個對象）

5.安全性

session的安全性大於cookie。緣由以下：

① sessionid存儲在cookie中，若要攻破session首先要攻破cookie；
② sessionid是要有人登陸，或者啓動session_start纔會有，因此攻破cookie也不必定能獲得sessionid；
③ 第二次啓動session_start後，前一次的sessionid就是失效了，session過時後，sessionid也隨之失效。
④ sessionid是加密的。

綜上所述，攻擊者必須在短期內攻破加密的sessionid，這很難。

6.應用場景

cookie：

（1）判斷用戶是否登陸過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）。
（2）保存上次登陸的事件等信息。
（3）保存上次查看的頁面
（4）瀏覽計數

session：

（1）網上商城中的購物車
（2）保存用戶登陸信息
（3）將某些數據放入session中，供同一用戶的不一樣頁面使用
（4）防止用戶非法登陸

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變量將會致使代碼不可讀並且很差維護。

WebStorage

WebStorage的目的是克服由cookie所帶來的一些限制，當數據須要被嚴格控制在客戶端時，不須要持續的將數據發回服務器。

WebStorage兩個主要目標：

1.提供一種在cookie以外存儲會話數據的路徑
2.提供一種存儲大量能夠跨會話存在的數據的機制

HTML5的WebStorage提供了兩種API：localStorage（本地存儲）和sessionStorage（會話存儲）

localStorage和sessionStorage的區別

1.生命週期

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

2.存儲大小

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

3.存儲位置

localStorage和sessionStorage都保存在客戶端，不與服務器進行交互通訊

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

快樂cookie, session, webstorage😁