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

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

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

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

一個典型的響應頭部：

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

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

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

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

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

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

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

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

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

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

由于 JavaScript 中讀寫 cookie 不是非常直觀，常常需要寫一些函數來簡化 cookie 的功能。基本的cookie 操作有三種：讀取、寫入和刪除。創建cookie的工具函數：

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

FireBug對應哪個頁面，設置的cookie就存儲在那個頁面對應的域。打開本地apache服務器的/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 打開本地服務器localhost主頁，設置安全的cookie。
CookieUtil.set("name","Nicholas", null, null, null, true);
console.log(CookieUtil.get("name"));
設置secure為true時，前面缺少的參數都定義為null。這是因為JavaScript會按照順序對應參數。

測試結果：安全項顯示“安全”。

子Cookie的目的是為了突破單域名下的Cookie數量限制，也就是在一個Cookie中存儲多個名值對，常見格式如下：
name=name1=value1&name2=value2&name3=value3&name4=value4&name5=value5

關于子Cookie的設置、獲取和刪除有以下工具函數：

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被延續到原來的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 的名稱，對應值為子 cookie對應的值。 get()方法接收兩個參數： cookie 的名字和子 cookie 的名字。它其實就是調用 getAll()獲取所有的子 cookie，然后只返回所需的那一個（如果 cookie 不存在則返回 null）。

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

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

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

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

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

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