前言
Cookie、localStorage 和 sessionStorage 作為Web開發領域中廣泛採用的三種客戶端資料儲存技術，它們各自擁有獨特的優勢、應用場景及限制條件，共同支撐起前端資料管理的多樣化需求。也是面試常考題之一，今天就和大家簡單談一下我對它們的理解。
Cookie
Cookie: Cookie 最早被設計用於維護使用者會話跟蹤狀態，例如儲存登入憑證、使用者偏好設定等。它的特性包括但不限於：
伺服器互動性：Cookie 可由伺服器設定並透過HTTP頭部在客戶端與伺服器間傳遞，使得伺服器能識別並追蹤使用者的特定會話資訊。
大小限制：單個Cookie的大小通常限制在4KB左右，且大多數瀏覽器對每個域名下的總Cookie數量也有限制。
生命週期管理：可設定為會話Cookie（瀏覽器關閉即失效）或持久Cookie（具有指定過期時間）。
安全性考量：儘管存在安全隱患，但可透過HttpOnly標誌防止XSS攻擊，Secure標誌保證HTTPS安全傳輸。
可以進入開發者模式（F12），開啟後點擊應用程式
點選之後就可以看到當前域名下面的cookie。本地儲存就是指的localStorage，會話儲存指的是sessionStorage。
localStorage
localStorage: localStorage是HTML5推出的一種持久化的客戶端儲存方案，特別適合儲存不需要與伺服器互動的大塊資料，例如遊戲進度、使用者設定等。這是一個非常大的數字了，利用localStorage 儲存必要的資料，使得在無網路環境下應用也能提供基本功能。
大容量儲存：相比
Cookie，localStorage提供了更大的儲存空間，一般不少於5MB，具體依瀏覽器而定。永續性：除非主動刪除或使用者清空瀏覽器資料，否則資料將永久保留。
簡單易用：透過JavaScript的
Web Storage API進行操作，支援鍵值對儲存模型。（setItem，getItem用來儲存和取出資料）侷限性：受同源策略限制，且不參與網路請求，適合儲存非敏感資料。
雖然localStorage 提供了便利的客戶端儲存能力，但由於其資料未加密且易於訪問（特別是對於同源策略下的指令碼），所以不適合儲存敏感資訊，如密碼、個人身份資訊等。對於這類資料，應考慮使用更安全的儲存方式，如HTTPS-only cookie或伺服器端會話儲存。那麼接下來就來介紹一下sessionStorage。
sessionStorage
sessionStorage： sessionStorage 與 localStorage 類似，也是HTML5引入的儲存機制，主要區別在於資料的有效期。sessionStorage 的資料僅在當前瀏覽器視窗或標籤頁中有效，一旦關閉頁面，資料就會被清除。
特點：
有效期：僅在當前瀏覽器會話期間有效，標籤頁或視窗關閉即失效。
容量限制：與localStorage相似，取決於瀏覽器。
安全性：同樣遵循同源策略，不參與網路請求。
使用場景：適合儲存臨時的使用者輸入資訊或狀態，如表單填寫過程中的草稿儲存。
總結
選擇依據：如果需要長期儲存用戶數據且不隨每次請求傳送，可以選擇localStorage；如果資料只需要在使用者當前會話中臨時儲存，sessionStorage更合適；而cookie常用於需要在伺服器和客戶端之間傳遞小量資訊，如認證令牌或保持使用者會話狀態。
安全性考量：對於敏感資料，儘管這些儲存方式都受限於同源策略，但最好還是在儲存前進行加密處理，特別是使用localStorage和sessionStorage時。
