cookie、session、sessionStorage、localStorage 之間的區別及應用場景

在前端平常開發中 cookie、webStorage 是咱們經常使用的瀏覽器緩存方式。但同時提及 cookie、session、sessionStorage 和 localStorage 是否是有些傻傻分不清楚了？本文梳理歸納了它們的區別及應用場景，相信對你的面試和實際應用都有必定幫助。

cookie

• 由服務端生成，保存在客戶端（因爲先後端有交互，因此安全性差，且浪費帶寬）
• 存儲大小有限（最大 4kb )
• 存儲內容只接受 String 類型

• 保存位置：

  • 若未設置過時時間，則保存在 內存 中，瀏覽器關閉後銷燬
  • 若設置了過時時間，則保存在 系統硬盤 中，直到過時時間結束後才消失（即便關閉瀏覽器）
• 數據操做不方便，原生接口不友好，須要本身封裝

• 應用場景

  • 判斷用戶是否登錄過網站，以便下次登陸時可以實現自動登陸（或者記住密碼）
  • 保存登陸時間、瀏覽次數等信息

設置了過時時間的cookie存在了哪裏呢？
Mac: /Users/用戶名/Library/caches/Google/Chrome/Default/cache
Windows: C:\Users\用戶名\AppData\LocalMicrosoft\Windows\Temporary Internet Files

session

• 是後端關心的內容，依賴於 cookie（sessionID 保存在cookie中）
• 保存在服務端
• 存儲大小無限制
• 支持任何類型的存儲內容
• 保存位置：服務器內存，若訪問較多會影響服務器性能

webStorage

webStorage 是 html5 提供的本地存儲方案，包括兩種方式：sessionStorage 和 localStorage。相比 cookie 這種傳統的客戶端存儲方式，webStorage 有許多優勢：

• 保存在客戶端，不與服務器通訊，所以比 cookie 更安全、速度更快
• 存儲空間有限，但比 cookie 大（5MB)
• 僅支持 String 類型的存儲內容（和 cookie 同樣）

• html5 提供了原生接口，數據操做比 cookie 方便

  • setItem(key, value) 保存數據，以鍵值對的方式儲存信息。
  • getItem(key) 獲取數據，將鍵值傳入，便可獲取到對應的value值。
  • removeItem(key) 刪除單個數據，根據鍵值移除對應的信息。
  • clear() 刪除全部的數據
  • key(index) 獲取某個索引的key

localStorage

• 持久化的本地存儲，瀏覽器關閉從新打開數據依然存在（除非手動刪除數據）。
• 應用場景：長期登陸、判斷用戶是否已登陸，適合長期保存在本地的數據。

存儲文件夾：
Mac: /Users/用戶名/Library/Application Support/Google/Chrome/Default/Local Stroage
Windows: C:\Users用戶名\AppData\Local\Google\Chrome\User Data\Profile\Local Storage

sessionStorage

• 瀏覽器窗口關閉後數據被銷燬。
• 應用場景：敏感帳號一次性登陸。

總結

綜上所述，咱們能夠知道，cookie 和 webStorage（ localStorage、sessionStorage ）是前端工程師關心的內容，session 是後端關心的內容。
cookie 存儲量小、安全性差、數據操做接口不友好，而 webStorage 存儲量較大、安全性較高、數據接口友好。
若要持久的存儲方式，推薦使用 localStorage
若要一次性會話的存儲，推薦使用 sessionStorage

看完有收穫嗎？喜歡請點贊支持哦~