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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

測試結(jié)果：安全項顯示“安全”。

子Cookie的目的是為了突破單域名下的Cookie數(shù)量限制，也就是在一個Cookie中存儲多個名值對，常見格式如下：
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ù)到原來的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);
  }
};

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

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

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

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

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

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