請描述 cookie, sessionStorage 和 localStorage 的差異

2023年12月29日

💎 加入 E+ 成長計畫 與超過 250+ 位軟體工程師一起在社群中成長,並且獲得更深入、系統性軟體工程內容

若你正在準備海外前端面試,可以閱讀本篇的英文版《What is the difference between cookie, sessionStorage and localStorage?》

在開發網頁時,我們有時候會需要將資料儲存在客戶端 (瀏覽器)。在存資料到瀏覽器的方式中,最常使用到的就是 cookie、localStorage 和 sessionStorage,這三者都可以拿來儲存資料,但有不同的適用情境和限制。而三者的異同,也是前端面試時常會考的。以下我們將會從使用方式、使用場景、生命週期、存放空間的大小,以及 HTTP 請求等多個角度,來分析它們的異同。

三者的異同

使用方式

cookie:第一次用戶端瀏覽器在發送請求後,伺服器端會在回應的標頭中,添加一個 Set-Cookie 的選項並將 cookie 放入到回應中,送回用戶瀏覽器端後,會儲存在用戶端本地。此外 cookie 會在用戶瀏覽器下一次發送請求時,一同被攜帶並發送回伺服器上。

localStorage、sessionStorage:這兩者都是使用鍵與值(key-value) 的方式儲存在用戶本地端。

// localStorage 存入數據
localStorage.setItem("memberName", "John");

// localStorage 讀取數據
localStorage.getItem("memberName");

// sessionStorage 存入數據
sessionStorage.setItem("memberName", "John");

// sessionStorage 讀取數據
sessionStorage.getItem("memberName");

使用場景

cookie 因為會被自動夾帶在 HTTP 請求中,所以常使用在需要辨識用戶的場景。localStorage 因為容量比 cookie 大得多且不會容易被刪除,使用情景也相對來得廣,例如:跨頁面的數據傳遞、需要長期保存的資料。sessionStorage 則是因為生命週期較短,適用於單次使用會需要用到的數據保存,例如:表單資料保存。

生命週期

cookie:可以透過 Expires 標明失效時間、或 Max-Age 標明有效時間長度,沒有設置的話,預設是關閉瀏覽器之後失效。

localStorage:除非在用戶端被手動刪除,或是程式碼清除,否則將永久保存。

sessionStorage:在每次關閉該頁面、或是關閉瀏覽器後就會自動被清除。

存放的數據大小

cookie:4KB 左右。

localStorage、sessionStorage:5MB~10MB 左右(依不同瀏覽器不一樣)()。

HTTP 請求

cookie:每次請求時都會被夾帶在 HTTP header 中,所以如果使用過多可能會帶來性能問題。

localStorage、sessionStorage:僅會存在客戶的瀏覽器端,不參與請求的過程。

延伸討論:如何增加 cookie 的安全性?

cookie 因為會被自動夾帶在 HTTP 請求中,傳送給伺服器,因此需要考量到安全性的問題。

  • Secure:加上 Secure 可以確保只有在以加密的請求透過 HTTPS 協議時,才會傳送給伺服器。
  • HttpOnly:加上 HttpOnly, 可以避免 JavaScript 的 Document.cookie方法取得 HttpOnly cookiesHttpOnly cookies 只會被傳送到伺服器,此方法可以避免跨站腳本攻擊 (XSS)。
🧵 如果你想收到最即時的內容更新,可以在 FacebookInstagram 上追蹤我們