關於 Cookie !!

Cookie 是甚麼?

Cookie 是儲存在瀏覽器的一小段文字資料，通常由伺服器透過 HTTP cookies (Set-Cookie header)，或者透過 Javascript 的 Document.cookie 設定，再傳遞給瀏覽器。瀏覽器收到後會將 cookie 儲存起來，並在之後的請求回傳 cookie 至同樣的伺服器。

Cookie 標頭不是必要的，比如瀏覽器可能會因為隱私設定而直接省略 Cookie 不傳。

Cookie 的用途?

Cookie 最常見的用途之一是認證身份，例如保持登入狀態、購物車等，也被應用於追蹤使用者及廣告上。
簡單來說，Cookie讓我們在使用網路上更方便流暢，我們有時會在網站上見到「是否同意使用Cookie？」的訊息。Cookie會將我們的ID或瀏覽紀錄等資訊紀錄下來並暫存。等到下一次瀏覽相同發布來源的網站（網路伺服器）時，就會透過網頁瀏覽器遞交給網路伺服器。網站就可因此辨別再次存取網站的使用者身份。
就是說網站會知道又是我上來逛逛了，這個時候網站就可以提供給我，我上次在網站時相關的資訊。
可以設想一下類似購物網站的情境。每次重新造訪購物網站，我們在前一次放入購物車中的商品仍然保留，或是推薦商品依舊顯示在螢幕上。或者，當你第一次登入一個網站時，你選擇了下次直接登入(或者幫你記住帳密)，等你下次上這個網站就不用再登入一次，這些都是因為Cookie。

主要三大用途

1. Session 管理 (帳號登入、購物車、遊戲分數，或任何其他伺服器應該記住的資訊)
2. 個人化 (使用者設定、佈景主題，以及其他設定)
3. 追蹤 (記錄並分析使用者行為)

使用 Cookie 的問題?

1. 隱私安全性問題是Cookie最大的爭議。
2. Cookie會被附加在每個 HTTP 請求中，所以無形中增加了流量。
3. Cookie 的大小限制在 4 KB 左右，對於複雜的儲存需求來說是不夠用的。

等等問題，這邊先不多介紹。
先來看看如何設定Cookie 吧!

設定 Cookie

設定Cookie有兩種方法: 1. Set-Cookie header (透過 HTTP Cookies) ; 2. Document.cookie (透過 Javascript)

HTTP Cookies

收到一個 HTTP 請求時，伺服器可以傳送一個 Set-Cookie 的標頭和回應。Cookie 通常存於瀏覽器中，並隨著請求被放在Cookie HTTP 標頭內，傳給同個伺服器。可以註明 Cookie 的有效或終止時間，超過後 Cookie 將不再發送。此外，也可以限制 Cookie 不傳送到特定的網域或路徑。

Set-Cookie: <cookie-name>=<cookie-value>

透過 JavaScript

1. 新增Cookie

document.cookie = ' cookie-name = cookie-value; expires = ' + new Date(XXXX,X,X).toUTCString()

document.cookie = ' name = bob; expires = ' + new Date(9999,0,1).toUTCString()

1. 查看已設置的Cookie

console.log(document.cookie);

Cookie v.s Local Storage v.s Session Storage

Cookie 和另外兩個最不一樣的地方就是: Cookie 不只針對 Browser 也針對 Server。 而另外兩者都只是在自己的Browser內。