Cookie、localStorage和sessionStorage的區別？🔥

這是我參與更文挑戰的第5天，活動詳情查看： 更文挑戰

---

Cookie 介紹

因爲 HTTP 是無狀態的協議，不能保存每一次請求的狀態，因此須要給客戶端增長 Cookie 來保存客 戶端的狀態。 Cookie 的做用主要用於 用戶識別 和 狀態管理 。（好比網頁常見的記住密碼）

安全性

在 Cookie 傳輸和管理的時候，要確保 Cookie 的安全性，不被竊取。

• Secure ：僅在 HTTPS 安全通訊時纔會發送 Cookie 。
• HttpOnly ：使用 Cookie 不能被 Javascript 腳本訪問（防止跨站腳本攻擊 XSS 對 Cookie 信 息的竊取）。
• SameSite ：防止跨站僞造 CORF 的攻擊
  • Strict ：瀏覽器徹底禁止第三方請求攜帶 Cookie。
  • Lax ：只能在 get 方法提交表單 狀況或者 a 標籤發送 get 請求 的狀況下能夠攜帶 Cookie。
  • None ：默認，請求會自動攜帶上 Cookie。

webStorage基於HTML5規範

HTML5 提供了兩種在客戶端存儲數據的新方法：localStorage和sessionStorage，掛載在window對象下。

webStorage是本地存儲，數據不是由服務器請求傳遞的。從而它能夠存儲大量的數據，而不影響網站的性能。

Web Storage的目的是爲了克服由cookie帶來的一些限制，當數據須要被嚴格控制在客戶端上時，無須持續地將數據發回服務器。好比客戶端須要保存的一些用戶行爲或數據，或從接口獲取的一些短時間內不會更新的數據，咱們就能夠利用Web Storage來存儲。

localStorage:

生命週期是永久性的。localStorage存儲的數據，即便關閉瀏覽器，也不會讓數據消失，除非主動的去刪除數據。若是 想設置失效時間，需自行封裝。

sessionStorage

生命週期是在瀏覽器相關

• 關閉瀏覽器或者頁面，sessionStorage 就會失效；
• 頁面刷新不會消除數據；
• 只有在當前頁面打開的連接，才能夠訪sessionStorage的數據，使用window.open打開頁面和改變localtion.href方式均可以獲 取到sessionStorage內部的數據;

總結：

特性	Cookie	localStorage	sessionStorage
數據的生命期	通常由服務器生成，可設置失效時間。若是在瀏覽器端生成Cookie，默認是關閉瀏覽器後失效	除非被清除，不然永久保存	僅在當前會話下有效，關閉頁面或瀏覽器後被清除
存放數據大小	4KB左右	通常爲5MB	同localstroage
與服務器端通訊	每次都會攜帶在HTTP頭中，發送給服務端。可是使用cookie保存過多數據會帶來性能問題	僅在客戶端（即瀏覽器）中保存，不和服務器的通訊	同localstroage