Cookie、localStorage和sessionStorage的區別?🔥

image.png

這是我參與更文挑戰的第5天,活動詳情查看: 更文挑戰web


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對象下。markdown

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

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

localStorage:

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

sessionStorage

生命週期是在瀏覽器相關post

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

總結:

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