Cookie知識總結（-）

學習了Cookie以後，對登陸註冊功能的實現，又有了全新的認識。

首先，咱們先了解一下Cookie的基礎知識，這些都是很重要的點（這裏主要參考阮一峯老師的博客）。

Cookie的基本概念

1. Cookie是服務器保存在瀏覽器的一小段文本信息，<!注意，這裏是服務器保存在瀏覽器中的>
2. 每一個Cookie的大小通常不超過4KB
3. 瀏覽器每次向服務器發起請求，就會自動附上這段信息 
    <注意 自動兩個字，是自動，這個功能是瀏覽器本身完成的，
    因此咱們寫Js的時候不用管怎麼拿到Cookie怎麼傳給服務器，瀏覽器會幫咱們完成的
複製代碼

Cookie的經常使用場景

Cookie主要用來分辨兩個請求是否來自同一個瀏覽器，以及用來保存一些狀態信息，經常使用場合：

1. 對話（session）管理: 保存登陸，購物車等須要記錄的信息。
2. 個性化： 保存用戶的偏好，如網頁的背景色，字體大小等。
3. 追蹤： 記錄和分析用戶行爲

複製代碼

不少人用Cookie做客戶端的存儲，雖然可行，可是並不推薦這種作法。

由於Cookie的設計初衷並非整個，且容量很小，只有4KB,
缺少數據操做接口，
並且會影響性能
（每次請求都要發送給服務器端，很佔用流浪，
  假如你有一個3kb的Cookie,發送了10次請求，那麼總計就會有30kb的數據在網絡上傳輸）
複製代碼

客戶端存儲推薦用 Web storage API 和 IndexedDB。

Cookie的基本信息

1.名字
2. 值（真正的數據寫在這裏）
3. 到期時間
4. 所屬域名（默認是當前域名）
5. 生效的路徑 (默認是當前網址)
複製代碼

舉例來講：
當咱們訪問 www.example.com 時，服務器就會在瀏覽器寫入一個 Cookie了
那個這個Cookie包含了什麼呢？
1. cookie的名字和值
2. www.example.com這個域名
3. 根路徑 '/',根路徑爲'/'意味着這個 Cookie對該域名的根路徑和它的全部子路徑都有效
...(可能還有到期時間等其餘信息)

注意：若是路徑設爲/forums，
那麼這個 Cookie 只有在訪問www.example.com/forums及其子路徑時纔有效
複製代碼

查看瀏覽器是否打開 Cookie 功能
window.navigator.cookieEnabled // true

獲取當前網頁的Cookie
document.cookie
複製代碼

Cookie大小和數量的限制

每一個瀏覽器對Cookie的大小和數量的限制不同，
可是通常來講，單個域名（注意這裏是單個域名）設置的Cookie不該超過30個，
且每一個Cookie的大小不該超過4kb，超過之後，Cookie將會被忽略，不會被設置
複製代碼

共享Cookie

瀏覽器的同源政策規定，兩個網址，只要域名相同，端口相同，就能夠共享Cookie
注意，這裏不須要協議相同
也就是說，http://example.com設置的 Cookie，能夠被https://example.com讀取
複製代碼

Cookie與HTTP協議

1.Cookie的生成

服務器是如何將Cookie寫入到瀏覽器的呢？
服務器只要在迴應的頭信息中，放置一個 Set-cookie字段就能夠了。
Set-cookie: foo = bar;
也能夠設置多個Set-cookie，下面是一個迴應例子：
HTTP/1.0 200 OK
Content-type: text/html
Set-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry;Expires=<date>;Domain=<domain-value>;Path=<path-value>;Secure;HttpOnly

[page content]

若是想要更改以前設置的一個Cookie，那麼就必須同時知足四個條件
（注意這裏是四個條件）：Cookie 的key、domain、path和secure都匹配。
只要有一個屬性不一樣，就會從新生成一個新的Cookie
複製代碼

Cookie例子：
Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly
複製代碼

2.Cookie的發送

瀏覽器向服務器發送 HTTP 請求時，每一個請求都會帶上相應的 Cookie。
也就是說，把服務器早前保存在瀏覽器的這段信息，再發回服務器。
這時要使用 HTTP 頭信息的Cookie字段。

一個請求的例子：
GET /sample_page.html HTTP/1.1
Host: www.example.org
Cookie: yummy_cookie=choco; tasty_cookie=strawberry
複製代碼

Cookie的屬性

1. Expires :具體到期時間，UTC格式，默認爲null，若不設置，則瀏覽器關閉該Cookie就會被刪除

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;
複製代碼

2. Max-Age屬性指定從如今開始 Cookie 存在的秒數，好比60 * 60 * 24 * 365（即一年）。過了這個時間之後，瀏覽器就再也不保留這個 Cookie。
3. 若是同時指定了Expires和Max-Age，那麼Max-Age的值將優先生效。
4. Domain

Domain設置域名，就是瀏覽器發出Http請求時，那些域名要帶上這個Cookie
若沒有設置，則默認爲當前URL的一級域名
如：
www.example.com會設爲example.com，並且之後若是訪問example.com的任何子域名
HTTP 請求也會帶上這個 Cookie
若是Set-Cookie字段指定的域名，不屬於當前的域名，那麼瀏覽器就會拒絕這個Cookie
複製代碼

5. Path

Path指定瀏覽器發出http請求以後，哪些路徑要帶上這個Cookie
好比，PATH屬性是/，那麼請求/docs路徑也會包含該 Cookie。固然，前提是域名必須一致。
複製代碼

6. Secure

Secure屬性指定瀏覽器只有在加密協議 HTTPS 下，才能將這個 Cookie 發送到服務器。
另外一方面，若是當前協議是 HTTP，瀏覽器會自動忽略服務器發來的Secure屬性。
該屬性只是一個開關，不須要指定值。若是通訊是 HTTPS 協議，該開關自動打開。
複製代碼

7. HttpOnly

HttpOnly屬性指定該 Cookie 沒法經過 JavaScript 腳本拿到，
主要是Document.cookie屬性、XMLHttpRequest對象和 Request API 都拿不到該屬性。
這樣就防止了該 Cookie 被腳本讀到，只有瀏覽器發出 HTTP 請求時，
纔會帶上該 Cookie。
複製代碼