cookie

摘要：追踪记录和分析用户行为。属性返回一个布尔值，表示浏览器是否打开功能。超过限制以后，将被忽略，不会被设置。属性指定浏览器只有在加密协议下，才能将这个发送到服务器。属性值必须是当前发送的域名的一部分。

Cookie 是服务器保存在浏览器的一小段文本信息，每个 Cookie 的大小一般不能超过4KB。浏览器每次向服务器发出请求，就会自动附上这段信息。

Cookie 主要用来分辨两个请求是否来自同一个浏览器，以及用来保存一些状态信息。

常用场合：
1.对话（session）管理：保存登录、购物车等需要记录的信息。
2.个性化：保存用户的偏好，比如网页的字体大小、背景色等等。
3.追踪：记录和分析用户行为。

不推荐作为客户端储存，缺乏数据操作接口，而且会影响性能。客户端储存应该使用 Web storage API 和 IndexedDB。

Cookie 包含以下几方面的信息：
1.Cookie 的名字
2.Cookie 的值（真正的数据写在这里面）
3.到期时间
4.所属域名（默认是当前域名）
5.生效的路径（默认是当前网址）

浏览器可以设置不接受 Cookie，也可以设置不向服务器发送 Cookie。window.navigator.cookieEnabled属性返回一个布尔值，表示浏览器是否打开 Cookie 功能。

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

document.cookie属性返回当前网页的 Cookie。

一般来说，单个域名设置的 Cookie 不应超过30个，每个 Cookie 的大小不能超过4KB。超过限制以后，Cookie 将被忽略，不会被设置。

服务器如果希望在浏览器保存 Cookie，就要在 HTTP 回应的头信息里面，放置一个Set-Cookie字段。

Set-Cookie:foo=bar//在浏览器保存一个名为foo的 Cookie，它的值为bar。

HTTP 回应可以包含多个Set-Cookie字段，即在浏览器生成多个 Cookie。

HTTP/1.0 200 OKContent-type: text/htm
lSet-Cookie: yummy_cookie=choco
Set-Cookie: tasty_cookie=strawberry

浏览器向服务器发送 HTTP 请求时，每个请求都会带上相应的 Cookie。也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使用 HTTP 头信息的Cookie字段。

Cookie: foo=bar//向服务器发送名为foo的 Cookie，值为bar

服务器收到浏览器发来的 Cookie 时，有两点是无法知道的。
Cookie 的各种属性，比如何时过期。
哪个域名设置的 Cookie，到底是一级域名设的，还是某一个二级域名设的。
例子：

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

Expires属性指定一个具体的到期时间，到了指定时间以后，浏览器就不再保留这个 Cookie。它的值是 UTC 格式，可以使用Date.prototype.toUTCString()进行格式转换。
如果不设置该属性，或者设为null，Cookie 只在当前会话（session）有效，浏览器窗口一旦关闭，当前 Session 结束，该 Cookie 就会被删除。浏览器根据本地时间，决定 Cookie 是否过期，由于本地时间是不精确的，所以没有办法保证 Cookie 一定会在服务器指定的时间过期。

Max-Age属性指定从现在开始 Cookie 存在的秒数，比如60 60 24 * 365（即一年）。过了这个时间以后，浏览器就不再保留这个 Cookie。
如果Set-Cookie字段没有指定Expires或Max-Age属性，那么这个 Cookie 就是 Session Cookie，即它只在本次对话存在，一旦用户关闭浏览器，浏览器就不会再保留这个 Cookie。

Path属性指定浏览器发出 HTTP 请求时，哪些路径要附带这个 Cookie。只要浏览器发现，Path属性是 HTTP 请求路径的开头一部分，就会在头信息里面带上这个 Cookie。比如，PATH属性是/，那么请求/docs路径也会包含该 Cookie。当然，前提是域名必须一致。

Secure属性指定浏览器只有在加密协议 HTTPS 下，才能将这个 Cookie 发送到服务器。另一方面，如果当前协议是 HTTP，浏览器会自动忽略服务器发来的Secure属性。该属性只是一个开关，不需要指定值。如果通信是 HTTPS 协议，该开关自动打开。

HttpOnly属性指定该 Cookie 无法通过 JavaScript 脚本拿到，主要是Document.cookie属性、XMLHttpRequest对象和 Request API 都拿不到该属性。这样就防止了该 Cookie 被脚本读到，只有浏览器发出 HTTP 请求时，才会带上该 Cookie。

document.cookie属性用于读写当前网页的 Cookie。
读取的时候，它会返回当前网页的所有 Cookie，前提是该 Cookie 不能有HTTPOnly属性。
document.cookie // "foo=bar;baz=bar"

document.cookie属性是可写的，可以通过它为当前网站添加 Cookie。
document.cookie = "fontSize=14";

各个属性的写入注意点如下。
**1.path属性必须为绝对路径，默认为当前路径。
2.domain属性值必须是当前发送 Cookie 的域名的一部分。比如，当前域名是example.com，就不能将其设为foo.com。该属性默认为当前的一级域名（不含二级域名）。
3.max-age属性的值为秒数。
4.expires属性的值为 UTC 格式，可以使用Date.prototype.toUTCString()进行日期格式转换。**
document.cookie写入 Cookie 的例子如下。

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

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

实现跨页面传值：

 var cookieUtil = {
            //添加cookie
            setCookie: function (name, value, expires) {
                var cookieText = encodeURIComponent(name) + "=" +
                    encodeURIComponent(value);
                if (expires && expires instanceof Date) {
                    cookieText += "; expires=" + expires;
                }
                // if (domain) {
                //     cookieText += "; domain=" + domain;
                // }
                document.cookie = cookieText;
            },
            //获取cookie
            getCookie: function (name) {
                var cookieText = decodeURIComponent(document.cookie);
                var cookieArr = cookieText.split("; ");
                for (var i = 0; i < cookieArr.length; i++) {
                    var arr = cookieArr[i].split("=");
                    if (arr[0] == name) {
                        return arr[1];
                    }
                }
                return null;
            },
            //删除cookie
            unsetCookie: function (name) {
                document.cookie = encodeURIComponent(name) + "=; expires=" +
                    new Date(0);
            }
        };
         //判断是否存在cookie，或是第一次添加
                var arr = cookieUtil.getCookie("car") ? JSON.parse(cookieUtil.getCookie("car")) : [];
                var date = new Date();
                    date.setDate(date.getDate() + 1); //保存十天
                    //保存cookie
                    cookieUtil.setCookie("car", JSON.stringify(arr), date);

//读取cookie
 var arr = cookieUtil.getCookie("car");
  if (arr) {
                arr = JSON.parse(arr);

                //存在cookie则取出来显示到页面上
                for (var i = 0; i < arr.length; i++) {
                ...}
            }