關於 Cookie !!


Posted by hoyi-23 on 2021-07-06

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內。

Cookies Local Storage Session Storage
capacity 4kb 10mb 5mb
Browsers HTML4/HTML5 HTML5 HTML5
Accessible from Any Window Any window Same Tab
Expires Manually Set Never On Tab Close
Storage Location Broswer & Server Browser Only Browser Only
Sent with Request Yes No No


#cookie #localstorage #sessionstorage #storage







Related Posts

關於 console.log 印出物件時所需注意的

關於 console.log 印出物件時所需注意的

[ week 1 ] Vim 編輯器 筆記

[ week 1 ] Vim 編輯器 筆記

容器化的概念

容器化的概念


Comments