Cookie 是伺服器儲存在瀏覽器的一小段文字資訊,每個 Cookie 的大小一般不能超過4k。瀏覽器每次向伺服器發起請求,就會自動附上這段資訊。
Cookie 主要用來分辨兩個請求是否來自同一個瀏覽器,以及用來儲存一些狀態資訊。他的常用場合有以下:
- 對話(session)管理:儲存登陸、購物車等需要記錄的資訊
- 個性化:儲存使用者的偏好,比如網頁的字型大小、背景色等到
- 追蹤:記錄和分析使用者行為
Cookie 包含以下資訊:
- Cookie 的名字
- Cookie 的值(真正的資料寫在這裡面)
- 到期時間
- 所屬域名(預設是當前域名)
- 生效的路徑(預設是當前網址)
瀏覽器可以設定不接受 Cookie,也可以設定不向伺服器傳送 Cookie。window.navigator.cookieEnabled
屬性返回一個布林值,表示瀏覽器是狗開啟 Cookie 功能。
// 瀏覽器是否開啟 Cookie 功能
window.navigator.cookieEnabled // true
複製程式碼
document.cookie
返回當前網頁的Cookie
一、Cookie 和 HTTP 協議
Cookie 由 HTTP 協議生成,業主要提供 HTTP 協議使用
HTTP 回應:Cookie 的生成
伺服器如果希望在瀏覽器儲存 Cookie,就要在 HTTP 回應的頭部資訊裡面,放置一個 Set-Cookie
欄位。
Set-Cookie:foo = bar
複製程式碼
如果伺服器想改變一個早先設定的 Cookie,必須同時滿足四個條件:Cookie 的key
,domain
,path
,secure
都匹配。
Http 請求:Cookie的傳送
瀏覽器向伺服器傳送 HTTP 請求時,每個請求都會帶上相應的 Cookie。也就是說,把伺服器早前儲存在瀏覽器的這段資訊,再發回伺服器。這時要使用 HTTP 頭資訊的Cookie欄位。
伺服器收到瀏覽器發來的 Cookie 時,有兩點是無法知道的。
-
Cookie 的各種屬性,比如何時過期。
-
哪個域名設定的 Cookie,到底是一級域名設的,還是某一個二級域名設的。
二、Cookie的屬性
Expires, Max-Age
Expires
屬性指定一個具體的到期時間,到了指定時間以後,瀏覽器就不再保留這個 Cookie。他的值是 UTC 格式,可以使用 Date.prototype.toUTCString()
進行格式轉換。
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
複製程式碼
如果不設定該屬性,或者設為null,Cookie 只在當前會話(session)有效,瀏覽器視窗一旦關閉,當前 Session 結束,該 Cookie 就會被刪除。另外,瀏覽器根據本地時間,決定 Cookie 是否過期,由於本地時間是不精確的,所以沒有辦法保證 Cookie 一定會在伺服器指定的時間過期。
Max-Age
屬性指定從現在開始 Cookie 存在的秒數,比如60 * 60 * 24 * 365
(即一年)。過了這個時間以後,瀏覽器就不再保留這個 Cookie。
如果同時指定了Expires
和Max-Age
,那麼Max-Age的值將優先生效。
Domain,Path
Domain
屬性指定瀏覽器發出 HTTP 請求時,哪些域名要附帶這個 Cookie。
Path
屬性指定瀏覽器發出 HTTP 請求時,哪些路徑要附帶這個 Cookie。
Secure, HttpOnly
Secure
屬性指定瀏覽器只有在加密協議 HTTPS 下,才能將這個 Cookie 傳送到伺服器。另一方面,如果當前協議是 HTTP,瀏覽器會自動忽略伺服器發來的Secure屬性。該屬性只是一個開關,不需要指定值。如果通訊是 HTTPS 協議,該開關自動開啟。
HttpOnly
屬性指定該 Cookie 無法通過 JavaScript 指令碼拿到,主要是document.cookie
屬性、XMLHttpRequest
物件和 Request API 都拿不到該屬性。