前端三十｜27. [WEB] Cookie & Session 是什麼？

Cookie 和 Session 這兩個名詞，相信大部分的開發者都不會太陌生，特別是 Cookie，從社群網站、電商平台、Google Analytics 分析等地方，無處不見它的應用；但從本質上，Cookie & Session 究竟是什麼呢？這就要從 HTTP 的特性說起。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

無狀態的 HTTP

小明喜歡帶著 MAC 去星巴克當潮潮，每周總是會擠出時間去星巴克喝咖啡用電腦，常常一坐就是一整天；從最一開始不知道要點什麼，逐漸喝到辦了隨行卡，還成為金星級會員；而正妹店員也從詢問「先生貴姓」，轉變成讀取隨行卡後詢問「小明您的隨行卡餘額還有 280 元喔」。

注意到關鍵了嗎？對就是隨行卡（正妹店員？）。在沒有隨行卡的情況下，店員不知道小明是誰，對店員來說，每一位客人都是單次的事件，，必須要透過隨行卡，才能知道小明是誰、剩下多少餘額，也就是小明在星巴克的「狀態」。

昨天 我們討論了 RESTful API 時，提到了 HTTP 是一個無狀態的通訊協定，就如同星巴克的店員不會記住客人是誰一樣，伺服器不會記住使用者是誰，而是把每一次收到的請求都視為獨立的行為。

如果是純粹展示靜態內容的網站，無狀態不會是個問題，反而是很棒的優點，因為客戶端、伺服器、資料庫都不需要儲存使用者狀態，也就省去了大量的儲存空間；但在複雜的網路應用，例如需要辨別使用者身分時，無狀態的通訊就會是個問題。

HTTP 的狀態管理機制

那如果要讓無狀態的 HTTP 能記住使用者是誰，該怎麼做呢？

還記得剛剛的隨行卡嗎？如果店家對每個使用者發出一個會員卡，就能夠透過會員卡來辨別使用者是誰了；同樣的道理，在 HTTP 的規範 — 狀態管理機制 的章節中，規範了一套讓無狀態的 HTTP 能得知使用者狀態的方法；簡單來說，就是伺服器透過 Header 的屬性 Set-Cookie，把使用者的狀態紀錄成儲存在使用者電腦裡的 Cookie，而瀏覽器在每一次發送請求時，都在 Header 中設定 Cookie 屬性，把 Cookie 帶上，伺服器就能藉由檢視 Cookie 的內容，得知瀏覽器使用者的狀態；而像是「從登入到登出」、「從開始瀏覽網頁到 Cookie 失效」，或是任何伺服器能認出使用者狀態的時間區間，就叫做 Session。

例如瀏覽器回應的內容如下：

HTTP/1.0 200 OK…