Cookie

Cookie 是直接存储在浏览器中的一小串数据。它们是 HTTP 协议的一部分，由 RFC 6265 规范定义。

Cookie 通常是由 Web 服务器使用响应 Set-Cookie HTTP-header 设置的。然后浏览器使用 Cookie HTTP-header 将它们自动添加到（几乎）每个对相同域的请求中。

最常见的用处之一就是身份验证：

  1. 登录后，服务器在响应中使用 Set-Cookie HTTP-header 来设置具有唯一“会话标识符（session identifier）”的 cookie。
  2. 下次如果请求是由相同域发起的，浏览器会使用 Cookie HTTP-header 通过网络发送 cookie。
  3. 所以服务器知道是谁发起了请求。

特点：

            1.按照域名来存储的

                不同的域名下的cookie数据不共通。

            2.有存储的路径

                127.0.0.1:8080/a/b.html  cookie /a/b  /

                127.0.0.1:8080/b/b.html  cookie /b/b

            3.cookie 存储的数据格式

                "键1=值1;键2=值2"

            4.存储大小

                4KB   50条左右

            5.时效性：

                默认是会话级别

                我们可以手动设置cookie的过期时间

        

写入 document.cookie

我们可以写入 document.cookie。但这不是一个数据属性，它是一个访问器（getter/setter）。对其的赋值操作会被特殊处理。

对 document.cookie 的写入操作只会更新其中提到的 cookie，而不会涉及其他 cookie。

例如，此调用设置了一个名称为 user 且值为 yasuo的 cookie：

document.cookie = "user=yasuo"; // 只会更新名称为 user 的 cookie
alert(document.cookie); // 展示所有 cookie

如果你运行了上面这段代码，你会看到多个 cookie。这是因为 document.cookie= 操作不是重写整所有 cookie。它只设置代码中提到的 cookie user。

获取Cookie中相应键对应的值

document.cookie 的值由 name=value 对组成，以 ; 分隔。每一个都是独立的 cookie。

有两种获取方法：

1、通过分割字符串

2、通过indexof检索、和substring截取字符串

1、截取字符串

// key 键
    function getCookie(key) {
        if (document.cookie.length > 0) {
            // 字符串按照分号分割，得到数组
            var arr = document.cookie.split(";");
            for (var i = 0; i < arr.length; i++) {
                // trim:删除空格，按照等号分割，得到[键，名]的数组
                var t = arr[i].trim().split("=");
                // 判断键是否相等，返回相应的值
                if (t[0] === key) {
                    return t[1];
                }
            }
        }
        return "";
    }

2、检索截取

function getCookie(key) {
            console.log(document.cookie);
            if (document.cookie.length > 0) {
                var s = document.cookie.indexOf(key + "=");
                // 判断是否为第一个
                if (s == 0) {
                    var start = document.cookie.indexOf(key + "=");
                    // 判断是否查找到
                    if (start != -1) {
                        var end = document.cookie.indexOf(";", start);
                        // 判断是否为最后一个
                        if (end == -1) {
                            return end = document.cookie.length;
                        }
                        // 获取值
                        return document.cookie.substring(start + key.length + 1, end);
                    }
                } else {
                    // 查询的键不是第一个，这通过"; "//防止usename和name这样的键 + key + "="//防止names和name这样的键，获取下标；
                    var start = document.cookie.indexOf("; " + key + "=") + 2;
                    // 判断是否检索到
                    if (start != 1) {
                        // 从键开下标检索，到下一个分号；的到键对应值结束的下标
                        var end = document.cookie.indexOf(";", start);
                        if (end == -1) {
                            end = document.cookie.length;
                        }
                        console.log(start);
                        // 截取键长度加等号之后的值
                        return document.cookie.substring(start + key.length + 1, end);
                    }
                }
            }
            return "";
        }