在前端日常開發中 cookie、webStorage 是我們常用的瀏覽器快取方式。但同時說起 cookie、session、sessionStorage 和 localStorage 是不是有些傻傻分不清楚了？本文梳理概括了它們的區別及應用場景，相信對你的面試和實際應用都有一定幫助。
cookie
- 由服務端生成，儲存在客戶端（由於前後端有互動，所以安全性差，且浪費頻寬）
- 儲存大小有限（最大 4kb )
- 儲存內容只接受
String型別 -
儲存位置：
- 若未設定過期時間，則儲存在
記憶體中，瀏覽器關閉後銷燬 - 若設定了過期時間，則儲存在
系統硬碟中，直到過期時間結束後才消失（即使關閉瀏覽器）
- 若未設定過期時間，則儲存在
- 資料操作不方便，原生介面不友好，需要自己封裝
-
應用場景
- 判斷使用者是否登陸過網站，以便下次登入時能夠實現自動登入（或者記住密碼）
- 儲存登入時間、瀏覽次數等資訊
設定了過期時間的cookie存在了哪裡呢？
Mac: /Users/使用者名稱/Library/caches/Google/Chrome/Default/cache
Windows: C:Users使用者名稱AppDataLocalMicrosoftWindowsTemporary 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使用者名稱AppDataLocalGoogleChromeUser DataProfileLocal Storage
sessionStorage
- 瀏覽器視窗關閉後資料被銷燬。
- 應用場景：敏感賬號一次性登入。
總結
綜上所述，我們可以知道，cookie 和 webStorage（ localStorage、sessionStorage ）是前端工程師關心的內容，session 是後端關心的內容。cookie 儲存量小、安全性差、資料操作介面不友好，而 webStorage 儲存量較大、安全性較高、資料介面友好。
若要持久的儲存方式，推薦使用 localStorage
若要一次性會話的儲存，推薦使用 sessionStorage
看完有收穫嗎？喜歡請點贊支援哦~