JS Cookie获取值

蔚落 2023-01-09 14:27 132阅读 0赞

# 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] ##

我们可以写入 `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、检索截取 ##

[RFC 6265]: https://tools.ietf.org/html/rfc6265
[document.cookie]: https://zh.javascript.info/cookie#xie-ru-documentcookie