javascript基础从小白到高手系列六百三十九：cookie 的构成

cookie 在浏览器中是由以下参数构成的。
 名称：唯一标识cookie 的名称。cookie 名不区分大小写，因此myCookie 和MyCookie 是同一
个名称。不过，实践中最好将cookie 名当成区分大小写来对待，因为一些服务器软件可能这样
对待它们。cookie 名必须经过URL 编码。
 值：存储在cookie 里的字符串值。这个值必须经过URL 编码。
 域：cookie 有效的域。发送到这个域的所有请求都会包含对应的cookie。这个值可能包含子域（如
www.wrox.com），也可以不包含（如.wrox.com 表示对wrox.com 的所有子域都有效）。如果不明
确设置，则默认为设置cookie 的域。
 路径：请求URL 中包含这个路径才会把cookie 发送到服务器。例如，可以指定cookie 只能由
http://www.wrox.com/books/访问，因此访问http://www.wrox.com/下的页面就不会发送cookie，即
使请求的是同一个域。
 过期时间：表示何时删除cookie 的时间戳（即什么时间之后就不发送到服务器了）。默认情况下，
浏览器会话结束后会删除所有cookie。不过，也可以设置删除cookie 的时间。这个值是GMT 格
式（Wdy, DD-Mon-YYYY HH:MM:SS GMT），用于指定删除cookie 的具体时间。这样即使关闭
浏览器cookie 也会保留在用户机器上。把过期时间设置为过去的时间会立即删除cookie。
 安全标志：设置之后，只在使用SSL 安全连接的情况下才会把cookie 发送到服务器。例如，请
求https://www.wrox.com 会发送cookie，而请求http://www.wrox.com则不会。
这些参数在Set-Cookie 头部中使用分号加空格隔开，比如：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; expires=Mon, 22-Jan-07 07:10:24 GMT; domain=.wrox.com
Other-header: other-header-value
这个头部设置一个名为"name"的cookie，这个cookie 在2007 年1 月22 日7:10:24 过期，对
www.wrox.com 及其他wrox.com的子域（如p2p.wrox.com）有效。
安全标志secure 是cookie 中唯一的非名/值对，只需一个secure 就可以了。比如：
HTTP/1.1 200 OK
Content-type: text/html
Set-Cookie: name=value; domain=.wrox.com; path=/; secure
Other-header: other-header-value
这里创建的cookie 对所有wrox.com 的子域及该域中的所有页面有效（通过path=/指定）。不过，
这个cookie 只能在SSL 连接上发送，因为设置了secure 标志。
要知道，域、路径、过期时间和secure 标志用于告诉浏览器什么情况下应该在请求中包含cookie。
这些参数并不会随请求发送给服务器，实际发送的只有cookie 的名/值对。
JavaScript 中的cookie
在JavaScript 中处理cookie 比较麻烦，因为接口过于简单，只有BOM的document.cookie 属性。
根据用法不同，该属性的表现迥异。要使用该属性获取值时，document.cookie 返回包含页面中所有
有效cookie 的字符串（根据域、路径、过期时间和安全设置），以分号分隔，如下面的例子所示：
name1=value1;name2=value2;name3=value3
所有名和值都是URL 编码的，因此必须使用decodeURIComponent()解码。
在设置值时，可以通过document.cookie 属性设置新的cookie 字符串。这个字符串在被解析后会
添加到原有cookie 中。设置document.cookie 不会覆盖之前存在的任何cookie，除非设置了已有的
cookie。设置cookie 的格式如下，与Set-Cookie 头部的格式一样：
name=value; expires=expiration_time; path=domain_path; domain=domain_name; secure
在所有这些参数中，只有cookie 的名称和值是必需的。下面是个简单的例子：
document.cookie = “name=Nicholas”;
这行代码会创建一个名为"name"的会话cookie，其值为"Nicholas"。这个cookie 在每次客户端向
服务器发送请求时都会被带上，在浏览器关闭时就会被删除。虽然这样直接设置也可以，因为不需要在
名称或值中编码任何字符，但最好还是使用encodeURIComponent()对名称和值进行编码，比如：
document.cookie = encodeURIComponent(“name”) + “=” +
encodeURIComponent(“Nicholas”);
要为创建的cookie 指定额外的信息，只要像Set-Cookie 头部一样直接在后面追加相同格式的字
符串即可：
document.cookie = encodeURIComponent(“name”) + “=” +
encodeURIComponent(“Nicholas”) + “; domain=.wrox.com; path=/”;
因为在JavaScript 中读写cookie 不是很直观，所以可以通过辅助函数来简化相应的操作。与cookie
相关的基本操作有读、写和删除。这些在CookieUtil 对象中表示如下：
class CookieUtil {
static get(name) {
let cookieName = ${encodeURIComponent(name)}=,
cookieStart = document.cookie.indexOf(cookieName),
cookieValue = null;
if (cookieStart > -1){
let cookieEnd = document.cookie.indexOf(“;”, cookieStart);
if (cookieEnd == -1){
cookieEnd = document.cookie.length;
}
cookieValue = decodeURIComponent(document.cookie.substring(cookieStart

• cookieName.length, cookieEnd));
  }
  return cookieValue;
  }
  static set(name, value, expires, path, domain, secure) {
  let 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) {
  cookieText += “; secure”;
  }
  document.cookie = cookieText;
  }
  static unset(name, path, domain, secure) {
  CookieUtil.set(name, “”, new Date(0), path, domain, secure);
  }
  };
  CookieUtil.get()方法用于取得给定名称的cookie 值。为此，需要在document.cookie 返回的
  字符串中查找是否存在名称后面加上等号。如果找到了，则使用indexOf()再查找该位置后面的分号
  （表示该cookie 的末尾）。如果没有找到分号，说明这个cookie 在字符串末尾，因此字符串剩余部分都是
  cookie 的值。取得cookie 值后使用decodeURIComponent()解码，然后返回。如果没有找到cookie，
  则返回null。
  CookieUtil.set()方法用于设置页面上的cookie，接收多个参数：cookie 名称、cookie 值、可
  选的Date 对象（表示何时删除cookie）、可选的URL 路径、可选的域以及可选的布尔值（表示是否添
  加secure 标志）。这些参数以它们的使用频率为序，只有前两个是必需的。在方法内部，使用了encodeURIComponent()对名称和值进行编码，然后再依次检查其他参数。如果expires 参数是Date
  对象，则使用Date 对象的toGMTString()方法添加一个expires 选项来获得正确的日期格式。剩下
  的代码就是简单地追加cookie 字符串，最终设置给document.cookie。
  没有直接删除已有cookie 的方法。为此，需要再次设置同名cookie（包括相同路径、域和安全选项），
  但要将其过期时间设置为某个过去的时间。CookieUtil.unset()方法实现了这些处理。这个方法接收
  4 个参数：要删除cookie 的名称、可选的路径、可选的域和可选的安全标志。
  这些参数会传给CookieUtil.set()，将cookie 值设置为空字符串，将过期时间设置为1970 年
  1 月1 日（以0 毫秒初始化的Date 对象的值）。这样可以保证删除cookie。
  可以像下面这样使用这些方法：
  // 设置cookie
  CookieUtil.set(“name”, “Nicholas”);
  CookieUtil.set(“book”, “Professional JavaScript”);
  // 读取cookie
  alert(CookieUtil.get(“name”)); // “Nicholas”
  alert(CookieUtil.get(“book”)); // “Professional JavaScript”
  // 删除cookie
  CookieUtil.unset(“name”);
  CookieUtil.unset(“book”);
  // 设置有路径、域和过期时间的cookie
  CookieUtil.set(“name”, “Nicholas”, “/books/projs/”, “www.wrox.com”,
  new Date(“January 1, 2010”));
  // 删除刚刚设置的cookie
  CookieUtil.unset(“name”, “/books/projs/”, “www.wrox.com”);
  // 设置安全cookie
  CookieUtil.set(“name”, “Nicholas”, null, null, null, true);
  这些方法通过处理解析和cookie 字符串构建，简化了使用cookie 存储数据的操作。