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 协议

服务器如果希望在浏览器保存 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。也就是说，把服务器早前保存在浏览器的这段信息，再发回服务器。这时要使用 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

Cookie 的属性

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

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++) {
                ...}
            }