Blog

You are currently viewing Session與Cookie的差異為何?

Session與Cookie的差異為何?

Session與Cookie的區別是常見且基礎的問題，今天讓阿建來介紹Session與Cookie的機制以及他們與Web Storage API之間的區別吧!

Session是什麼?

Session的機制與HTTP為無狀態設計有關，由於HTTP協議的無狀態特性，讓網站的每個請求都是獨立且互不相關的，因此Server沒辦法判定當前的使用者的狀態。
舉個例子:使用者將某商品加入購物車，切換頁面後再次將其他商品加入購物車，由於無狀態的關係，這2次的請求彼此沒有關聯，所以網站無法知道使用者最終加入了那些商品。導致使用者沒辦法在同一網站中有連續性的頁面互動，而Session便是為了解決這問題而誕生。

Session機制具體的解釋這邊參考RFC2109的描述:

This document describes a way to create stateful sessions with HTTP requests and responses. Currently, HTTP servers respond to each client request without relating that request to previous or subsequent requests; the technique allows clients and servers that wish to exchange state information to place HTTP requests and responses within a larger context, which we term a “session”.

RFC2109

There are, of course, many different potential contexts and thus many different potential types of session. The designers’ paradigm for sessions created by the exchange of cookies has these key attributes:

1. Each session has a beginning and an end.
2. Each session is relatively short-lived.
3. Either the user agent or the origin server may terminate a session.
4. The session is implicit in the exchange of state information.

RFC2109

簡單來說，透過Session可以讓請求(Request)與回應(Response)在一段期間內具有狀態。或是讓請求(Request)與回應(Response)具有上下文(context)的關聯。

而RFC2109中交換Cookie建立的Session的幾項要點

  • 每個Session都有開始與結束
  • 每個Session都是相對短暫的
  • 瀏覽器或Server任一方都可以終止Session
  • Session隱含在狀態資訊的交換當中

要點中解釋了藉由交換Cookie建立的Session可以讓使用者與Server的之間的狀態資訊相互交換，如此一來讓HTTP不再是無狀態，這樣Server便可以分辨網站的使用者，讓使用者與網站的互動聯繫起來!

Session的機制具體的就像你在火鍋店用餐，店員會給你填了用餐桌號的明細，用餐期間你點的東西都會記錄在這張明細上，而店員不會記住你是誰。用餐期間店員依據你的桌號與明細提供相關的用餐服務，當你結帳時，店員便依據明細認定你是顧客，以及你在用餐期間點了那些餐點來結帳。

Cookie是什麼?

上面的段落有稍微提到Cookie的功用，接下來讓我們先從MDN對Cookie的描述來看:

HTTP cookie（web cookie、browser cookie）為伺服器傳送予使用者瀏覽器的一個小片段資料。瀏覽器可能儲存並於下一次請求回傳 cookie 至相同的伺服器。Cookie 通常被用來保持使用者的登入狀態——如果兩次請求都來自相同的瀏覽器。舉例來說，它記住了無狀態（stateless） (en-US)HTTP 協議的有狀態資訊。

MDN-HTTP cookies

Cookie是由Server傳給瀏覽器(Client)的一小段資料，並由瀏覽器保存，當下一次請求或是造訪同一網站時，就可以將Cookie發送給網站的Server，Server透過Cookie儲存的資訊來區分請求(Request)是否來自同一瀏覽器。如果相同，便可以建立有狀態的資訊關聯。常見的Cookie應用如記住使用者的登入狀態或是記住一些使用者的行為資訊等。

Cookie的應用有哪些?

  1. 瀏覽器的使用者行為追蹤與分析
  2. 記錄使用者的個人化設定
  3. 使用者的登入資訊或任何需要Server記住的資訊

例如:當我們瀏覽新聞網站時，網站會詢問你是否提供Cookie，這背後其中目的便是分析你的瀏覽習慣，再推薦符合你興趣的新聞，這便是一種Cookie應用。除此之外，還有紀錄表單的填寫狀態，讓不小心關閉網頁的使用者不必再次填寫表單。在提升使用者的瀏覽體驗Cookie功不可沒!

Cookie的限制有哪些?

由於Cookie是存放在客戶端，所以不能佔用太多使用者儲存空間。因此Cookie的使用便要有所限制，而不同的瀏覽器對Cookie的限制也有所不同，阿建在下面列出各大瀏覽器對Cookie的限制

  • IE6以下每個域名最多包含20個Cookie。
  • IE7以上每個域名最多50個Cookie。
  • Firefox每個域名最多50個Cookie。
  • Opera每個域名最多30個Cookie。
  • Sarafi和Chrome對每個域名的Cookie數量沒有嚴格限制。

而Cookie一般的大小限制在4096 bytes，超過容量的Cookie會被瀏覽器忽略!

Cookie的缺點

雖然Cookie帶來許多的便利性，但同樣也存在著風險，因為Cookie記住的資訊是可以修改的，也就是資料可以被有心人偽造，所以重要的資料如使用者的登入資訊，就不能存放在Cookie裡。
既然重要資料不能放在Client端，那要放在哪呢?為了解決這問題就需要用到Session了，Session的作法就是把這些重要的資料存在Server端，來保護這些資料。

Web Storage API

除了Cookie之外，還可以透過Web Storage API在Client端儲存使用者資訊。
Web Storage API 提供了2種儲存資料的方式，分別為:

  • Local Storage:儲存的資料是永久的，除非被清除
  • Session Storage:儲存的資料在頁面的Session期間可用，一旦瀏覽器或分頁被關閉，儲存的資料便立即失效

相較於Cookie，LocalStorage與SessionStorage具有更大的容量，更適合存放大量Client的資料，由於2者的資料只保存在Client端，因此不會影響網頁的效能。具體使用:

  • 電商的購物車改用LocalStorage可以減少Cookie負擔
  • SessionStorage則可用於需要拆分步驟填寫的表單以提升使用者體驗

Cookie、LocalStorage與SessionStorage

特性CookieSessionStorageLocalStorage
資料生命週期預設是當瀏覽器關閉後失效
可設置失效時間		生命週期僅存在於單一瀏覽器分頁
瀏覽器關閉後即失效
每個分頁的SessionStorage都是新的		除非被清除，否則永久保存
容量4KB5MB10MB
存放位置瀏覽器與Server瀏覽器瀏覽器
與Server溝通每次請求都會帶上
保存過多的資訊會影響效能		保存在Client端
每次請求都不會帶上		保存在Client端
每次請求都不會帶上
Cooike、SessionStorage與LocalStorage的比較

關於這3者的差異也可以參考下面影片中的解釋，影片中也介紹了LocalStorage與SessionStorage的使用方式。

Cookies vs LocalStorage vs SessionStorage

總結

將文中對Session、Cookie與Web Storage API做個整理

Session

  • 解決HTTP無狀態的特性
  • 保存在Server
  • 開始到結束的一段期間內的狀態
  • 每個Session都有開始與結束
  • 每個Session都是相對短暫的
  • 瀏覽器或Server任一方都可以終止Session
  • Session隱含在狀態資訊的交換當中

Cookie

  • 保存在瀏覽器
  • 一小段的資料(4KB)
  • 常用於記住使用者的登入狀態或是記住一些使用者的行為資訊

SessionStorage

  • 容量為5MB
  • 保存在Client端
  • 不參與請求
  • 資料存在於單一瀏覽器分頁，瀏覽器關閉後即失效
  • 每個分頁的SessionStorage都是新的

LocalStorage

  • 容量為10MB
  • 保存在Client端
  • 不參與請求
  • 資料除非被清除，否則永久保存

參考資料

網頁開發全攻略
MDN-An overview of HTTP
MDN-HTTP cookies
RFC2109
白話 Session 與 Cookie：從經營雜貨店開始
Web Storage API
HTML Web Storage API
细说localStorage, sessionStorage, Cookie, Session

如果對文章內容有任何問題或是錯誤，歡迎在底下留言讓我知道: )

發佈留言