摘要：追蹤記錄和分析用戶行為。屬性返回一個(gè)布爾值，表示瀏覽器是否打開功能。超過限制以后，將被忽略，不會(huì)被設(shè)置。屬性指定瀏覽器只有在加密協(xié)議下，才能將這個(gè)發(fā)送到服務(wù)器。屬性值必須是當(dāng)前發(fā)送的域名的一部分。

Cookie 是服務(wù)器保存在瀏覽器的一小段文本信息，每個(gè) Cookie 的大小一般不能超過4KB。瀏覽器每次向服務(wù)器發(fā)出請(qǐng)求，就會(huì)自動(dòng)附上這段信息。

Cookie 主要用來分辨兩個(gè)請(qǐng)求是否來自同一個(gè)瀏覽器，以及用來保存一些狀態(tài)信息。

常用場(chǎng)合：
1.對(duì)話（session）管理：保存登錄、購物車等需要記錄的信息。
2.個(gè)性化：保存用戶的偏好，比如網(wǎng)頁的字體大小、背景色等等。
3.追蹤：記錄和分析用戶行為。

不推薦作為客戶端儲(chǔ)存，缺乏數(shù)據(jù)操作接口，而且會(huì)影響性能。客戶端儲(chǔ)存應(yīng)該使用 Web storage API 和 IndexedDB。

Cookie 包含以下幾方面的信息：
1.Cookie 的名字
2.Cookie 的值（真正的數(shù)據(jù)寫在這里面）
3.到期時(shí)間
4.所屬域名（默認(rèn)是當(dāng)前域名）
5.生效的路徑（默認(rèn)是當(dāng)前網(wǎng)址）

瀏覽器可以設(shè)置不接受 Cookie，也可以設(shè)置不向服務(wù)器發(fā)送 Cookie。window.navigator.cookieEnabled屬性返回一個(gè)布爾值，表示瀏覽器是否打開 Cookie 功能。

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

document.cookie屬性返回當(dāng)前網(wǎng)頁的 Cookie。

一般來說，單個(gè)域名設(shè)置的 Cookie 不應(yīng)超過30個(gè)，每個(gè) Cookie 的大小不能超過4KB。超過限制以后，Cookie 將被忽略，不會(huì)被設(shè)置。

服務(wù)器如果希望在瀏覽器保存 Cookie，就要在 HTTP 回應(yīng)的頭信息里面，放置一個(gè)Set-Cookie字段。

Set-Cookie:foo=bar//在瀏覽器保存一個(gè)名為foo的 Cookie，它的值為bar。

HTTP 回應(yīng)可以包含多個(gè)Set-Cookie字段，即在瀏覽器生成多個(gè) Cookie。

HTTP/1.0 200 OKContent-type: text/htm
lSet-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

瀏覽器向服務(wù)器發(fā)送 HTTP 請(qǐng)求時(shí)，每個(gè)請(qǐng)求都會(huì)帶上相應(yīng)的 Cookie。也就是說，把服務(wù)器早前保存在瀏覽器的這段信息，再發(fā)回服務(wù)器。這時(shí)要使用 HTTP 頭信息的Cookie字段。

Cookie: foo=bar//向服務(wù)器發(fā)送名為foo的 Cookie，值為bar

服務(wù)器收到瀏覽器發(fā)來的 Cookie 時(shí)，有兩點(diǎn)是無法知道的。
Cookie 的各種屬性，比如何時(shí)過期。
哪個(gè)域名設(shè)置的 Cookie，到底是一級(jí)域名設(shè)的，還是某一個(gè)二級(jí)域名設(shè)的。
例子：

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

Expires屬性指定一個(gè)具體的到期時(shí)間，到了指定時(shí)間以后，瀏覽器就不再保留這個(gè) Cookie。它的值是 UTC 格式，可以使用Date.prototype.toUTCString()進(jìn)行格式轉(zhuǎn)換。
如果不設(shè)置該屬性，或者設(shè)為null，Cookie 只在當(dāng)前會(huì)話（session）有效，瀏覽器窗口一旦關(guān)閉，當(dāng)前 Session 結(jié)束，該 Cookie 就會(huì)被刪除。瀏覽器根據(jù)本地時(shí)間，決定 Cookie 是否過期，由于本地時(shí)間是不精確的，所以沒有辦法保證 Cookie 一定會(huì)在服務(wù)器指定的時(shí)間過期。

Max-Age屬性指定從現(xiàn)在開始 Cookie 存在的秒數(shù)，比如60 60 24 * 365（即一年）。過了這個(gè)時(shí)間以后，瀏覽器就不再保留這個(gè) Cookie。
如果Set-Cookie字段沒有指定Expires或Max-Age屬性，那么這個(gè) Cookie 就是 Session Cookie，即它只在本次對(duì)話存在，一旦用戶關(guān)閉瀏覽器，瀏覽器就不會(huì)再保留這個(gè) Cookie。

Path屬性指定瀏覽器發(fā)出 HTTP 請(qǐng)求時(shí)，哪些路徑要附帶這個(gè) Cookie。只要瀏覽器發(fā)現(xiàn)，Path屬性是 HTTP 請(qǐng)求路徑的開頭一部分，就會(huì)在頭信息里面帶上這個(gè) Cookie。比如，PATH屬性是/，那么請(qǐng)求/docs路徑也會(huì)包含該 Cookie。當(dāng)然，前提是域名必須一致。

Secure屬性指定瀏覽器只有在加密協(xié)議 HTTPS 下，才能將這個(gè) Cookie 發(fā)送到服務(wù)器。另一方面，如果當(dāng)前協(xié)議是 HTTP，瀏覽器會(huì)自動(dòng)忽略服務(wù)器發(fā)來的Secure屬性。該屬性只是一個(gè)開關(guān)，不需要指定值。如果通信是 HTTPS 協(xié)議，該開關(guān)自動(dòng)打開。

HttpOnly屬性指定該 Cookie 無法通過 JavaScript 腳本拿到，主要是Document.cookie屬性、XMLHttpRequest對(duì)象和 Request API 都拿不到該屬性。這樣就防止了該 Cookie 被腳本讀到，只有瀏覽器發(fā)出 HTTP 請(qǐng)求時(shí)，才會(huì)帶上該 Cookie。

document.cookie屬性用于讀寫當(dāng)前網(wǎng)頁的 Cookie。
讀取的時(shí)候，它會(huì)返回當(dāng)前網(wǎng)頁的所有 Cookie，前提是該 Cookie 不能有HTTPOnly屬性。
document.cookie // "foo=bar;baz=bar"

document.cookie屬性是可寫的，可以通過它為當(dāng)前網(wǎng)站添加 Cookie。
document.cookie = "fontSize=14";

各個(gè)屬性的寫入注意點(diǎn)如下。
**1.path屬性必須為絕對(duì)路徑，默認(rèn)為當(dāng)前路徑。
2.domain屬性值必須是當(dāng)前發(fā)送 Cookie 的域名的一部分。比如，當(dāng)前域名是example.com，就不能將其設(shè)為foo.com。該屬性默認(rèn)為當(dāng)前的一級(jí)域名（不含二級(jí)域名）。
3.max-age屬性的值為秒數(shù)。
4.expires屬性的值為 UTC 格式，可以使用Date.prototype.toUTCString()進(jìn)行日期格式轉(zhuǎn)換。**
document.cookie寫入 Cookie 的例子如下。

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

Cookie 的屬性一旦設(shè)置完成，就沒有辦法讀取這些屬性的值。

實(shí)現(xiàn)跨頁面?zhèn)髦担?/p>

 var cookieUtil = {
            //添加cookie
            setCookie: function (name, value, expires) {
                var cookieText = encodeURIComponent(name) + "=" +
                    encodeURIComponent(value);
                if (expires && expires instanceof Date) {
                    cookieText += "; expires=" + expires;
                }
                // if (domain) {
                //     cookieText += "; domain=" + domain;
                // }
                document.cookie = cookieText;
            },
            //獲取cookie
            getCookie: function (name) {
                var cookieText = decodeURIComponent(document.cookie);
                var cookieArr = cookieText.split("; ");
                for (var i = 0; i < cookieArr.length; i++) {
                    var arr = cookieArr[i].split("=");
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return null;
            },
            //刪除cookie
            unsetCookie: function (name) {
                document.cookie = encodeURIComponent(name) + "=; expires=" +
                    new Date(0);
            }
        };
         //判斷是否存在cookie，或是第一次添加
                var arr = cookieUtil.getCookie("car") ? JSON.parse(cookieUtil.getCookie("car")) : [];
                var date = new Date();
                    date.setDate(date.getDate() + 1); //保存十天
                    //保存cookie
                    cookieUtil.setCookie("car", JSON.stringify(arr), date);

//讀取cookie
 var arr = cookieUtil.getCookie("car");
  if (arr) {
                arr = JSON.parse(arr);

                //存在cookie則取出來顯示到頁面上
                for (var i = 0; i < arr.length; i++) {
                ...}
            }