摘要：首先先來(lái)一段總結(jié)用于本地?cái)?shù)據(jù)存儲(chǔ)，出現(xiàn)在服務(wù)器和瀏覽器交互的響應(yīng)頭部和請(qǐng)求頭部中，受到單域名下的數(shù)量單個(gè)大小性能安全限制。子技術(shù)的出現(xiàn)緩解了單域名下的數(shù)量限制，關(guān)于子有一整套工具函數(shù)可以使用。

本篇主要介紹Cookie技術(shù)的讀書(shū)總結(jié)，但是我認(rèn)為邏輯上最好會(huì)和Web Storage技術(shù)放在一起進(jìn)行對(duì)比，因此后續(xù)會(huì)再總結(jié)一篇關(guān)于WEB存儲(chǔ)的姊妹總結(jié)，敬請(qǐng)期待。

首先先來(lái)一段總結(jié)：Cookie用于本地?cái)?shù)據(jù)存儲(chǔ)，出現(xiàn)在服務(wù)器和瀏覽器交互的響應(yīng)Set-Cookie頭部和請(qǐng)求Cookie頭部中，受到單域名下Cookie的數(shù)量、單個(gè)Cookie大小、性能、安全限制。子Cookie技術(shù)的出現(xiàn)緩解了單域名下Cookie的數(shù)量限制，關(guān)于子Cookie有一整套工具函數(shù)可以使用。

用戶的信息最好存儲(chǔ)在客戶端上，這就對(duì)客戶端數(shù)據(jù)存儲(chǔ)提出了要求。最早的解決方式就是Cookie。HTTP Cookie，通常直接叫做 cookie，最初是在客戶端用于存儲(chǔ)會(huì)話信息的。該標(biāo)準(zhǔn)要求服務(wù)器對(duì)任意 HTTP 請(qǐng)求發(fā)送 Set-Cookie HTTP 頭作為響應(yīng)的一部分，其中包含會(huì)話信息。

一個(gè)典型的響應(yīng)頭部：

HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value
Other-header: other-header-value

這個(gè) HTTP 響應(yīng)設(shè)置以 name 為名稱、以 value 為值的一個(gè) cookie，名稱和值在傳送時(shí)都必須是URL 編碼的。瀏覽器會(huì)存儲(chǔ)這樣的會(huì)話信息，并在這之后，通過(guò)為每個(gè)請(qǐng)求添加 Cookie 頭將信息發(fā)送回服務(wù)器：

GET /index.html HTTP/1.1
Cookie: name=value
Other-header: other-header-value

cookie 在性質(zhì)上是綁定在特定的域名下的。當(dāng)設(shè)定了一個(gè) cookie 后，再給創(chuàng)建它的域名發(fā)送請(qǐng)求時(shí)，都會(huì)包含這個(gè) cookie。這個(gè)限制確保了儲(chǔ)存在 cookie 中的信息只能讓批準(zhǔn)的接受者訪問(wèn)，而無(wú)法被其他域訪問(wèn)。

由于 cookie 是存在客戶端計(jì)算機(jī)上的，還加入了一些限制確保 cookie 不會(huì)被惡意使用，同時(shí)不會(huì)占據(jù)太多磁盤(pán)空間。每個(gè)域的 cookie 總數(shù)是有限的，不過(guò)瀏覽器之間各有不同：
1）IE6 以及更低版本限制每個(gè)域名最多 20 個(gè) cookie。
2）IE7 和之后版本每個(gè)域名最多 50 個(gè)。 IE7 最初是支持每個(gè)域名最大 20 個(gè) cookie，之后被微軟的一個(gè)補(bǔ)丁所更新。
3）Firefox 限制每個(gè)域最多 50 個(gè) cookie。
4）Opera 限制每個(gè)域最多 30 個(gè) cookie。
5）Safari 和 Chrome 對(duì)于每個(gè)域的 cookie 數(shù)量限制沒(méi)有硬性規(guī)定。

當(dāng)超過(guò)單個(gè)域名限制之后還要再設(shè)置 cookie，瀏覽器就會(huì)清除以前設(shè)置的 cookie。 IE 和 Opera 會(huì)刪除最近最少使用過(guò)的（LRU， Least Recently Used） cookie，騰出空間給新設(shè)置的 cookie。 Firefox 看上去好像是隨機(jī)決定要清除哪個(gè) cookie，所以考慮 cookie 限制非常重要，以免出現(xiàn)不可預(yù)期的后果。

瀏覽器中對(duì)于 cookie 的尺寸也有限制。大多數(shù)瀏覽器都有大約 4096B（加減 1）的長(zhǎng)度限制。為了最佳的瀏覽器兼容性，最好將整個(gè) cookie 長(zhǎng)度限制在 4095B（含 4095）以內(nèi)。尺寸限制影響到一個(gè)域下所有的 cookie，而并非每個(gè) cookie 多帶帶限制。如果你嘗試創(chuàng)建超過(guò)最大尺寸限制的 cookie，那么該 cookie 會(huì)被悄無(wú)聲息地丟掉。

1）名稱：一個(gè)唯一確定 cookie 的名稱。cookie 名稱是不區(qū)分大小寫(xiě)的。cookie 的名稱必須是經(jīng)過(guò) URL 編碼的。
2）值：儲(chǔ)存在 cookie 中的字符串值。值必須被 URL 編碼。
3）域： cookie 對(duì)于哪個(gè)域是有效的。所有向該域發(fā)送的請(qǐng)求中都會(huì)包含這個(gè) cookie 信息。
4）路徑：對(duì)于指定域中的那個(gè)路徑，應(yīng)該向服務(wù)器發(fā)送 cookie。
5）失效時(shí)間：表示 cookie 何時(shí)應(yīng)該被刪除的時(shí)間戳（也就是，何時(shí)應(yīng)該停止向服務(wù)器發(fā)送這個(gè)cookie）。默認(rèn)情況下，瀏覽器會(huì)話結(jié)束時(shí)即將所有 cookie 刪除；不過(guò)也可以自己設(shè)置刪除時(shí)間。這個(gè)值是個(gè) GMT 格式的日期（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定應(yīng)該刪除cookie 的準(zhǔn)確時(shí)間。因此， cookie 可在瀏覽器關(guān)閉后依然保存在用戶的機(jī)器上。如果你設(shè)置的失效日期是個(gè)以前的時(shí)間，則 cookie 會(huì)被立刻刪除。
6）安全標(biāo)志：指定后， cookie 只有在使用 SSL 連接的時(shí)候才發(fā)送到服務(wù)器。例如， cookie 信息只能發(fā)送給 https://www.wrox.com，而 http://www.wrox.com 的請(qǐng)求則不能發(fā)送 cookie。

每一段信息都作為 Set-Cookie 頭的一部分，使用分號(hào)加空格分隔每一段。secure 標(biāo)志是 cookie 中唯一一個(gè)非名值對(duì)兒的部分，直接包含一個(gè) secure 單詞。尤其要注意，域、路徑、失效時(shí)間和 secure 標(biāo)志都是服務(wù)器給瀏覽器的指示（是從服務(wù)器發(fā)回的響應(yīng)），以指定何時(shí)應(yīng)該發(fā)送 cookie。這些參數(shù)并不會(huì)作為發(fā)送到服務(wù)器的 cookie 信息的一部分，只有名值對(duì)兒才會(huì)被發(fā)送到服務(wù)器。

設(shè)置 cookie 的格式如下，和 Set-Cookie 頭中使用的格式一樣，如下：
name=value; expires=expiration_time; path=domain_path;
domain=domain_name; secure

由于 JavaScript 中讀寫(xiě) cookie 不是非常直觀，常常需要寫(xiě)一些函數(shù)來(lái)簡(jiǎn)化 cookie 的功能。基本的cookie 操作有三種：讀取、寫(xiě)入和刪除。創(chuàng)建cookie的工具函數(shù)：

    var CookieUtil = {
    get: function (name) {
    var cookieName = encodeURIComponent(name) + "=",
    cookieStart = document.cookie.indexOf(cookieName),
    cookieValue = null;
    if (cookieStart > - 1) {
      var cookieEnd = document.cookie.indexOf(";", cookieStart);
      if (cookieEnd == - 1) {
        cookieEnd = document.cookie.length;
      }
      cookieValue = decodeURIComponent(document.cookie.substring(cookieStart
      + cookieName.length, cookieEnd));
    }
    return cookieValue;
  },
  set: function (name, value, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + "=" +
    encodeURIComponent(value);
    if (expires instanceof Date) {
      cookieText += "; expires=" + expires.toGMTString();
    }
    if (path) {
      cookieText += "; path=" + path;
    }
    if (domain) {
      cookieText += "; domain=" + domain;
    }
    if (secure) { //secure在這里是布爾值
      cookieText += "; secure";
    }
    document.cookie = cookieText;
  },
  unset: function (name, path, domain, secure) {
    this.set(name, "", new Date(0), path, domain, secure);
  }

};

CookieUtil.get()方法根據(jù) cookie 的名字獲取相應(yīng)的值。它會(huì)在 document.cookie 字符串中查找 cookie 名加上等于號(hào)的位置。如果找到了，那么使用 indexOf()查找該位置之后的第一個(gè)分號(hào)（表示了該 cookie 的結(jié)束位置）。如果沒(méi)有找到分號(hào)，則表示該 cookie 是字符串中的最后一個(gè)，則余下的字符串都是 cookie 的值。該值使用 decodeURIComponent()進(jìn)行解碼并最后返回。如果沒(méi)有發(fā)現(xiàn) cookie，則返回 null。
CookieUtil.set()方法在頁(yè)面上設(shè)置一個(gè) cookie，接收如下幾個(gè)參數(shù)： cookie 的名稱， cookie 的值，可選的用于指定 cookie 何時(shí)應(yīng)被刪除的 Date 對(duì)象， cookie 的可選的 URL 路徑，可選的域，以及可選的表示是否要添加 secure 標(biāo)志的布爾值。參數(shù)是按照它們的使用頻率排列的，只有頭兩個(gè)是必需的。在這個(gè)方法中，名稱和值都使用encodeURIComponent()進(jìn)行了URL編碼，并檢查其他選項(xiàng)。如果expires參數(shù)是 Date 對(duì)象，那么會(huì)使用 Date 對(duì)象的 toGMTString()方法正確格式化 Date 對(duì)象，并添加到expires 選項(xiàng)上。方法的其他部分就是構(gòu)造 cookie 字符串并將其設(shè)置到 document.cookie 中。
沒(méi)有刪除已有 cookie 的直接方法。所以，需要使用相同的路徑、域和安全選項(xiàng)再次設(shè)置 cookie，并將失效時(shí)間設(shè)置為過(guò)去的時(shí)間。 CookieUtil.unset()方法可以處理這種事情。它接收 4 個(gè)參數(shù)：要?jiǎng)h除的 cookie 的名稱、可選的路徑參數(shù)、可選的域參數(shù)和可選的安全參數(shù)。這些參數(shù)加上空字符串并設(shè)置失效時(shí)間為 1970 年 1 月 1 日（初始化為 0ms 的 Date 對(duì)象的值），傳給 CookieUtil.set()。這樣就能確保刪除 cookie。

FireBug對(duì)應(yīng)哪個(gè)頁(yè)面，設(shè)置的cookie就存儲(chǔ)在那個(gè)頁(yè)面對(duì)應(yīng)的域。打開(kāi)本地apache服務(wù)器的/localhost/alien/頁(yè)面，在其中打開(kāi)firebug。
測(cè)試實(shí)例1：

    CookieUtil.set("name", "Nicholas");
    CookieUtil.set("book", "Professional JavaScript");
    //讀取 cookie 的值
    console.log(CookieUtil.get("name")); //"Nicholas"
    console.log(CookieUtil.get("book")); //"Professional JavaScript"

測(cè)試實(shí)例2 刪除cookie：
CookieUtil.unset("name");
CookieUtil.unset("book");
此時(shí)FireBug中不顯示任何Cookie。

測(cè)試實(shí)例3 打開(kāi)本地服務(wù)器localhost主頁(yè)，設(shè)置安全的cookie。
CookieUtil.set("name","Nicholas", null, null, null, true);
console.log(CookieUtil.get("name"));
設(shè)置secure為true時(shí)，前面缺少的參數(shù)都定義為null。這是因?yàn)镴avaScript會(huì)按照順序?qū)?yīng)參數(shù)。

測(cè)試結(jié)果：安全項(xiàng)顯示“安全”。

子Cookie的目的是為了突破單域名下的Cookie數(shù)量限制，也就是在一個(gè)Cookie中存儲(chǔ)多個(gè)名值對(duì)，常見(jiàn)格式如下：
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

關(guān)于子Cookie的設(shè)置、獲取和刪除有以下工具函數(shù)：

var SubCookieUtil = {
  get: function (name, subName) {
    var subCookies = this.getAll(name);
    if (subCookies) {
      return subCookies[subName];
    } else {
      return null;
    }
  },
  getAll: function (name) {
    var cookieName = encodeURIComponent(name) + "=",
    cookieStart = document.cookie.indexOf(cookieName),
    cookieValue = null,
    cookieEnd,
    subCookies,
    i,
    parts,
    result = {
    };
    if (cookieStart > - 1) {
      cookieEnd = document.cookie.indexOf(";", cookieStart);
      if (cookieEnd == - 1) {
        cookieEnd = document.cookie.length;
      }
      cookieValue = document.cookie.substring(cookieStart +
      cookieName.length, cookieEnd);
      if (cookieValue.length > 0) {
        subCookies = cookieValue.split("&");
        for (i = 0, len = subCookies.length; i < len; i++) {
          parts = subCookies[i].split("=");
          result[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
        }
        return result;
      }
    }
    return null;
  },
  set: function (name, subName, value, expires, path, domain, secure) {
    var subcookies = this.getAll(name) || {
    };
    subcookies[subName] = value;
    this.setAll(name, subcookies, expires, path, domain, secure);
  },
  setAll: function (name, subcookies, expires, path, domain, secure) {
    var cookieText = encodeURIComponent(name) + "=",
    subcookieParts = new Array(),
    subName;
    for (subName in subcookies) {
      //由于采用push方法，新的子Cookie被延續(xù)到原來(lái)的Cookie中
      if (subName.length > 0 && subcookies.hasOwnProperty(subName)) {
        subcookieParts.push(encodeURIComponent(subName) + "=" +
        encodeURIComponent(subcookies[subName]));
      }
    }
    if (subcookieParts.length > 0) {
      cookieText += subcookieParts.join("&");
      if (expires instanceof Date) {
        cookieText += "; expires=" + expires.toGMTString();
      }
      if (path) {
        cookieText += "; path=" + path;
      }
      if (domain) {
        cookieText += "; domain=" + domain;
      }
      if (secure) {
        cookieText += "; secure";
      }
    } else {
      cookieText += "; expires=" + (new Date(0)).toGMTString();
    }
    document.cookie = cookieText;
  },
  unset: function (name, subName, path, domain, secure) {
    var subcookies = this.getAll(name);
    if (subcookies) {
      delete subcookies[subName];
      this.setAll(name, subcookies, null, path, domain, secure);
    }
  },
  unsetAll: function (name, path, domain, secure) {
    this.setAll(name, null, new Date(0), path, domain, secure);
  }
};

以下是對(duì)上述方法的解析：
獲取子 cookie 的方法有兩個(gè)： get()和 getAll()。其中 get()獲取單個(gè)子 cookie 的值， getAll()獲取所有子 cookie 并將它們放入一個(gè)對(duì)象中返回，對(duì)象的屬性為子 cookie 的名稱，對(duì)應(yīng)值為子 cookie對(duì)應(yīng)的值。 get()方法接收兩個(gè)參數(shù)： cookie 的名字和子 cookie 的名字。它其實(shí)就是調(diào)用 getAll()獲取所有的子 cookie，然后只返回所需的那一個(gè)（如果 cookie 不存在則返回 null）。

SubCookieUtil.getAll()方法和 CookieUtil.get()在解析 cookie 值的方式上非常相似。區(qū)別在于 cookie 的值并非立即解碼，而是先根據(jù)&字符將子 cookie 分割出來(lái)放在一個(gè)數(shù)組中，每一個(gè)子 cookie再根據(jù)等于號(hào)分割，這樣在 parts 數(shù)組中的前一部分便是子 cookie 名，后一部分則是子 cookie 的值。這兩個(gè)項(xiàng)目都要使用 decodeURIComponent()來(lái)解碼，然后放入 result 對(duì)象中，最后作為方法的返回值。如果 cookie 不存在，則返回 null。

set()方法接收 7 個(gè)參數(shù)： cookie 名稱、子 cookie 名稱、子 cookie 值、可選的 cookie 失效日期或時(shí)間的 Date 對(duì)象、可選的 cookie 路徑、可選的 cookie 域和可選的布爾 secure 標(biāo)志。所有的可選參數(shù)都是作用于 cookie本身而非子 cookie。為了在同一個(gè) cookie中存儲(chǔ)多個(gè)子 cookie，路徑、域和 secure標(biāo)志必須一致；針對(duì)整個(gè) cookie 的失效日期則可以在任何一個(gè)多帶帶的子 cookie 寫(xiě)入的時(shí)候同時(shí)設(shè)置。在這個(gè)方法中，第一步是獲取指定 cookie 名稱對(duì)應(yīng)的所有子 cookie。邏輯或操作符“ ||”用于當(dāng) getAll()返回 null 時(shí)將 subcookies 設(shè)置為一個(gè)新對(duì)象。然后，在 subcookies 對(duì)象上設(shè)置好子 cookie 值并傳給setAll()。

setAll()方法接收 6 個(gè)參數(shù)： cookie 名稱、包含所有子 cookie 的對(duì)象以及和 set()中一樣的 4個(gè)可選參數(shù)。這個(gè)方法使用 for-in 循環(huán)遍歷第二個(gè)參數(shù)中的屬性。為了確保確實(shí)是要保存的數(shù)據(jù)，使用了 hasOwnProperty()方法，來(lái)確保只有實(shí)例屬性被序列化到子 cookie 中。由于可能會(huì)存在屬性名為空字符串的情況，所以在把屬性名加入結(jié)果對(duì)象之前還要檢查一下屬性名的長(zhǎng)度。將每個(gè)子 cookie的名值對(duì)兒都存入 subcookieParts 數(shù)組中，以便稍后可以使用 join()方法以&號(hào)組合起來(lái)。

普通 cookie 可以通過(guò)將失效時(shí)間設(shè)置為過(guò)去的時(shí)間的方法來(lái)刪除，但是子 cookie 不能這樣做。為了刪除一個(gè)子 cookie，首先必須獲取包含在某個(gè) cookie中的所有子 cookie，然后僅刪除需要?jiǎng)h除的那個(gè)子 cookie，然后再將余下的子 cookie 的值保存為 cookie的值。unset()方法用于刪除某個(gè) cookie 中的單個(gè)子 cookie而不影響其他的；而 unsetAll()方法則等同于 CookieUtil.unset()，用于刪除整個(gè) cookie。和 set()及 setAll()一樣，路徑、域和 secure 標(biāo)志必須和之前創(chuàng)建的 cookie 包含的內(nèi)容一致。

//設(shè)置兩個(gè) cookie
SubCookieUtil.set("data", "name", "Nicholas");
SubCookieUtil.set("data", "book", "Professional JavaScript");

//設(shè)置全部子 cookie 和失效日期
SubCookieUtil.setAll("data", { name: "Nicholas", book: "Professional JavaScript" },new Date("January 1, 2018"));

//修改名字的值，并修改 cookie 的失效日期
SubCookieUtil.set("data", "name", "Michael", new Date("February 1, 2010"));

//刪除所有子Cookie
SubCookieUtil.unsetAll("data");

1）單域名下數(shù)目限制和大小限制：子Cookie只是突破了單個(gè)域名下Cookie數(shù)目限制，但是Cookie的大小依舊受限，因此要注意子Cookie的大小不能使單個(gè)Cookie超出大小限制。
2）性能限制：由于所有的 cookie 都會(huì)由瀏覽器作為請(qǐng)求頭發(fā)送，所以在 cookie 中存儲(chǔ)大量信息會(huì)影響到特定域的請(qǐng)求性能。 cookie 信息越大，完成對(duì)服務(wù)器請(qǐng)求的時(shí)間也就越長(zhǎng)。盡管瀏覽器對(duì) cookie 進(jìn)行了大小限制，不過(guò)最好還是盡可能在 cookie 中少存儲(chǔ)信息，以避免影響性能。
3）安全限制：cookie 數(shù)據(jù)并非存儲(chǔ)在一個(gè)安全環(huán)境中，其中包含的任何數(shù)據(jù)都可以被他人訪問(wèn)。所以不要在 cookie 中存儲(chǔ)諸如信用卡號(hào)或者個(gè)人地址之類(lèi)的數(shù)據(jù)。
cookie 的性質(zhì)和它的局限使得其并不能作為存儲(chǔ)大量信息的理想手段，所以又出現(xiàn)了其他方法。