[ Web ] Cookie & Session

通常在學習網頁初期時，Cookie 和 Session 是必學的觀念之一，而自己一直沒有把這兩個觀念用文字的方式紀錄下來，今天稍微整理一下，且釐清自己有搞混的地方．

無狀態服務 (stateless service)

在了解 Cookie 和 Session 之前，要先知道 HTTP協議 本身是 無狀態服務 (stateless service) 的，而 無狀態服務 簡單的說就是每次的請求都與之前的請求沒有任何關係的獨立一次性請求．

而就是因為 無狀態 的這個特性，其實在以前登入信箱、Blog、購物網站..等需登入的網站時，每次都需要重新輸入帳號與密碼，而為了讓使用者能快速進入網站開始使用網站功能， cookie 就在這樣的情況下誕生了．

Cookie

以購物車概念為例，當我們進入購物網站依序購買”帽子、衣服”時，實際情況是：

1.購買帽子：點選購買帽子後，伺服器傳送 cookie（含有帽子的資訊）

2.購買衣服：進到衣服頁面（瀏覽器傳送 cookie 給伺服器，伺服器就知道剛已購買帽子），接著點選購買衣服，伺服器傳送 cookie（將帽子資訊加上衣服的資訊）

3.結帳：進入結帳頁面（將 cookie 傳送給伺服器），伺服器解讀完就知道該用戶到底買了哪些東西了．

而透過上面的例子可以看到 cookie 就像一張會點菜明細一樣，而每加點一道菜，就會紀錄在明細裡，到了最後結帳的時後，將這張明細給店家，店家就知道你買了哪些東西．

cookie 儲存於用戶端中，主要分別存在記憶體與硬碟中：

• 記憶體 - 瀏覽器關閉及消失
• 硬碟 - 除非手動刪除或已到過期時間，不然不會消失

Cookie 特性

• 儲存大小限制約 4kb
• 儲存於用戶端中
• 安全性低，明文傳遞
• 只對原本的 domain 起作用
• 向該 domain 的 server 發送請求時，也會被一併帶進去該請求中

Cookie 操作

• 檢查 -> Application -> Cookies
  

• 新增一筆資料到 cookie：
  document.cookie = "temp-name=bob"
  

• GMT 時間格式：
  new Date().toGMTString()

• 設定 30 秒內自動刪除 cookie：
  document.cookie = "temp-name=bob ; max-age=10; path=/"

• 指定cookie 過期時間：
  document.cookie = "temp-name=bob ; expires=Wed, 31 Jul 2019 12:14:30 GMT; path=/"

Session

cookie 存在於使用者端且又可以被修改，安全性這麼不高的情況下，就產生了 Session．

而Session是存在於伺服器中．通常用於使用者登入後，伺服器將所有該用戶要使用的資料存入 cookie 回傳給用戶端後，並建立一個對應的 Session ID，

那竟然這個 Session ID 建立在伺服器端，這樣你應該猜到到底怎麼運作了，當用戶端要建立一個 Session ID 時，伺服器收到著個請求時，會去檢查這個請求有沒有包含這個 Session ID ，若有檢查到代表已經建立過了，伺服器就會將這個 Session ID 所需要的資訊回傳回去．但若沒有則建立一個新的對應的Session ID，並回傳給用戶端保存．

Session 就可以想像是一張會員卡，裡面記載了所有這個會員的資訊，給店家看了之後，店家就可以特過這張會員卡，查詢這個會員的所有交易紀錄等個人資訊．

Session 特性

• 儲存於伺服器端

參考：
Day19 要來塊餅乾嗎? Cookie & Sessio
Cookie 是文檔還是餅乾？簡述HTTP網頁紀錄會員資訊的一大功臣
wiki - cookie
Day14-Session與Cookie差別
介紹 Session 及 Cookie 兩者的差別說明