請描述 cookie, sessionStorage 和 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 因為會被自動夾帶在 HTTP 請求中，傳送給伺服器，因此需要考量到安全性的問題。

Secure：加上 Secure 可以確保只有在以加密的請求透過 HTTPS 協議時，才會傳送給伺服器。
HttpOnly：加上 HttpOnly，可以避免 JavaScript 的 Document.cookie方法取得 HttpOnly cookies，HttpOnly cookies 只會被傳送到伺服器，此方法可以避免跨站腳本攻擊 (XSS)。

三者的異同

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