cookie、sessionStorage和localStorage的區別

都為常見的瀏覽器儲存方式

webStorage

webStorage是本地儲存，儲存在客戶端，包括localStorage和sessionStorage localStorage生命週期是永久，這意味著除非使用者顯示在瀏覽器提供的UI上清除localStorage資訊，否則這些資訊將永遠存在。存放資料大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊 sessionStorage僅在當前會話下有效，關閉頁面或瀏覽器後被清除。存放資料大小為一般為5MB,而且它僅在客戶端（即瀏覽器）中儲存，不參與和伺服器的通訊。源生介面可以接受，亦可再次封裝來對Object和Array有更好的支援

作用域的不同： 不同瀏覽器無法共享localStorage或sessionStorage中的資訊。相同瀏覽器的不同頁面間可以共享相同的 localStorage（頁面屬於相同域名和埠），但是不同頁面或標籤頁間無法共享sessionStorage的資訊。這裡需要注意的是，頁面及標 籤頁僅指頂級視窗，如果一個標籤頁包含多個iframe標籤且他們屬於同源頁面，那麼他們之間是可以共享sessionStorage的

儲存大小： localStorage和sessionStorage的儲存資料大小一般都是：5MB

儲存位置： localStorage和sessionStorage都儲存在客戶端，不與伺服器進行互動通訊

儲存內容型別： localStorage和sessionStorage只能儲存字串型別，對於複雜的物件可以使用ECMAScript提供的JSON物件的stringify和parse來處理

獲取方式： localStorage：window.localStorage sessionStorage：window.sessionStorage

應用場景： localStoragese：常用於長期登入（+判斷使用者是否已登入），適合長期儲存在本地的資料 sessionStorage：敏感賬號一次性登入

Cookie

HTTP Cookie簡稱cookie,在HTTP請求傳送Set-Cookie HTTP頭作為響應的一部分。通過name=value的形式儲存

cookie的構成： name：cookie 的名稱 

value：cookie 對應的值，動態生成的 

domain：伺服器域名 

expiry：Cookie 有效終止日期 

path：Path 屬性定義了 Web 伺服器上哪些路徑下的頁面可獲取伺服器 設定的Cookie

httpOnly：防指令碼攻擊 

secure:在 Cookie 中標記該變數，表明只有當瀏覽器和 Web Server 之間的通訊協議為加密 認證協議時， 瀏覽器才向伺服器提交 相應的Cookie。當前這種協議只有一種，即為 HTTPS。

cookie的作用:主要用於儲存登入資訊 生命期為只在設定的cookie過期時間之前一直有效，即使視窗或瀏覽器關閉。 存放資料大小為4K左右 。有個數限制（各瀏覽器不同），一般不能超過20個。與伺服器端通訊：每次都會攜帶在HTTP頭中，如果使用cookie儲存過多資料會帶來效能問題

WebStorage的優點：

儲存空間更大   節省網路流量     快速顯示     安全性

WebStorage提供了一些方法，資料操作比cookie方便

setItem (key, value) —— 儲存資料

getItem (key) —— 獲取資料

removeItem (key) —— 刪除單個數據

clear () —— 刪除所有的資料

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

cookie的優點：

具有極高的擴充套件性和可用性

通過良好的程式設計，控制儲存在cookie中的session物件的大小

通過加密和安全傳輸技術，減少cookie被破解的可能性 只有在cookie中存放不敏感的資料，即使被盜取也不會有很大的損失 控制cookie的生命期，使之不會永遠有效。這樣的話偷盜者很可能拿到的就 是一個過期的

cookie cookie的缺點： cookie的長度和數量的限制。 安全性問題。

sessionStorage、localStorage和cookie的區別

1）相同點是都是儲存在瀏覽器端、且同源的

2）cookie資料始終在同源的http請求中攜帶（即使不需要），即cookie在瀏覽器和伺服器間來回傳遞 sessionStorage和localStorage不會自動把資料傳送給伺服器，僅在本地儲存。 cookie資料還有路徑（path）的概念，可以限制cookie只屬於某個路徑下

3）儲存大小限制也不同 cookie資料不能超過4K sessionStorage和localStorage雖然也有儲存大小的限制，但比cookie大得多，可以達到5M或更大

4）資料有效期不同 sessionStorage：僅在當前瀏覽器視窗關閉之前有效 localStorage：始終有效，視窗或瀏覽器關閉也一直儲存，因此用作持久資料 cookie：只在設定的cookie過期時間之前有效，即使視窗關閉或瀏覽器關閉

5）作用域不同 sessionStorage不在不同的瀏覽器視窗中共享，即使是同一個頁面 localstorage在所有同源視窗中都是共享的 cookie也是在所有同源視窗中都是共享的

6）webStorage支援事件通知機制，可以將資料更新的通知傳送給監聽者

7）webStorage的api介面使用更方便