关于javascript:cookie知识总结

最近，革除cookie的时候，应用了document.cookie = ''，而后就发现没有作用。于是，带着上述疑难，找个工夫钻研了下cookie。本文次要是基于我遇到问题，而后解决问题的思路写的，并不是以从0到1讲述cookie的思路写的。

为了解决上述问题，以及在解决问题中的发散思考，次要通过以下问题：

1. document.cookie = ''是否用来革除cookie；
2. 同时设置了expires和max-age，哪个无效；
3. 假如曾经有一个名为hello的cookie，再次设置名为hello的cookie是新增还是批改；
4. 如何把字符串模式的cookie改成json的模式；
5. 如果设置了多个同名cookie，获取cookie时以哪个为准；

学习了以下知识点：

1. cookie赋值语法；
2. cookie赋值算法；
3. cookie取值算法。

准备常识

本文参考了英文文档，所以提前阐明以下英文对应的中文翻译：

1. cookie store: cookie表，浏览器外部用于存储cookie信息的数据结构；
2. cookie name: 一个cookie的名称；
3. cookie value: 一个cookie的值；
4. cookie attribute: 一个cookie的属性，cookie除了根本的名称和值之外，还有用来进一步形容cookie的属性，比方Expires，Max-Age，Domain，Path，Secure HttpOnly等。这些属性是提供给用户设置cookie的时候应用的，并不是cookie外部理论存储的属性。

其余准备常识：

每个cookie在理论存储的时候，会有下述字段：name, value, expiry-time, domain, path, creation-time, last-access-time, persistent-flag, host-only-flag, secure-only-flag, and http-only-flag。能够看出这些字段和设置cookie时的属性并不是一对一关系，其中，

1. expiry-time是通过Expires和Max-Age得进去的；
2. persistent-flag和是否设置了过期工夫无关；
3. creation-time(创立工夫)和last-access-time(最初一次拜访工夫)是浏览器主动存储的属性。

document.cookie赋值语法

这部分内容次要是基于以下问题：

1. document.cookie = ''是否用来革除cookie？

首先看下document.cookie的定义：

The Document property cookie lets you read and write cookies associated with the document. It serves as a getter and setter for the actual values of the cookies.

从下面能够看到，document.cookie只是提供了一个getter和setter办法来拜访和设置cookie，并不是间接批改cookie的值。什么意思呢？

咱们晓得，JS提供了两种类型的属性，data property和accessor property。别离举个例子比照看下：

// data property
var obj1 = {
    hello: 'name'
}
Object.getOwnPropertyDescriptor(obj1, 'hello')

// accessor property
var realHello = '' // 理论存储obj2.hello的变量
var obj2 = {
    get hello () {
        return 'custom get ' + realHello
    },
    set hello (val) {
        realHello = 'custom set ' + val
    }
}
obj2.hello = 'name'

console.log(obj2.hello)
Object.getOwnPropertyDescriptor(obj2, 'hello')

能够看到用于形容obj1的hello属性的是value和writable，用于形容obj2的hello属性的是get和set。简略的说，获取和批改data property是间接的，获取和批改accessor property是间接的，能够通过该属性的get和set做自定义解决。咱们相熟的Vue 2.0响应式的data的属性就是accessor property。

document的cookie属性也是accessor property。验证的时候发现一个有意思的问题，最终是在document的原型上找到的属性描述符，当前有工夫了钻研下：

Object.getOwnPropertyDescriptor(document, 'cookie') // undefined
Object.getOwnPropertyDescriptor(document.__proto__.__proto__, 'cookie')

咱们看下document.cookie的语法：

document.cookie = newCookie;

批改的时候，newCookie的格局须要满足如下模式，且一次只能设置/更新单个cookie：

In the code above, newCookie is a string of form key=value. Note that you can only set/update a single cookie at a time using this method.

举个例子，关上MDN document.cookie页面。增加一个cookie，每个cookie前面能够增加和该cookie相干的一系列属性，通过分号;宰割：

// cookie默认过期工夫是session，也就是浏览器敞开的时候，该cookie就生效了
document.cookie = 'hello1=world1;'

// 应用max-age设置过期工夫：max-age以秒为单位，设置1个小时之后过期：3600 = 60 * 60
document.cookie = 'hello2=world2;max-age=3600'

// 应用expires设置过期工夫：expires是GMT模式的日期格局，设置1小时之后过期
var current = new Date()
current.setTime(current.getTime() + 3600000) // setTime单位是ms，3600000 = 60 * 60 * 1000
document.cookie = `hello3=world3;expires=${current.toUTCString()}`

Chrome Application Cookies内容截图如下：

既然document.cookie只能设置/更新单个cookie，当赋值为空字符串的时候，那就是什么都没有做。也就是document.cookie = ''不会产生任何作用，不能用于革除cookie。

那么，
问：如何应用document.cookie革除一个cookie呢？
答：能够在设置cookie的时候，设置一个曾经过来的过期工夫：

// 应用expires设置一个过来一小时之前的工夫
document.cookie = 'hello2=world2;max-age=-3600'

// 应用expires设置一个过来一小时之前的工夫
var current = new Date()
current.setTime(current.getTime() - 3600000)
document.cookie = `hello3=world3;expires=${current.toUTCString()}`

当初，只剩下了一个hello1：

注：浏览器开发者工具是提供了革除cookie的操作的，上述次要探讨的是如何通过js革除cookie。

cookie赋值算法

这部分内容次要是基于以下两个问题：

1. 同时设置了expires和max-age，哪个无效？
2. 假如曾经有一个名为hello的cookie，再次设置名为hello的cookie的时候是新增还是批改？

问题1: 同时设置了expires和max-age，哪个无效？

后面的例子中，我应用了expires和max-age，我的疑难是感觉这两个属性是干了一样的事件，如果我同时设置了这两个属性的话，哪个失效呢？

带着这个疑难，找到了RFC 6265 – HTTP State Management Mechanism。这个标准外面明确定义了如何设置/更新cookie。

就上面的例子，咱们依照文档找一下答案：

var current = new Date()
console.log('now: ', current.toUTCString()) // now:  Sat, 20 Feb 2021 11:41:02 GMT
current.setTime(current.getTime() + 3600000)
// 应用expires设置为一小时之后过期：60 * 60 * 1000 = 3600000ms
// 应用max-age设置为两小时之后过期：2 * 60 * 60 = 7200s
document.cookie = `hello=world;expires=${current.toUTCString()};max-age=7200` // hello=world;expires=Sat, 20 Feb 2021 12:41:02 GMT;max-age=7200

这部分的内容次要是在第五局部的5.2。首先，它会把设置的这个值通过逗号宰割成多个局部，而后通过等号把每个局部分成key-value的模式：

hello=world;expires=Sat, 20 Feb 2021 12:41:02 GMT;max-age=7200
// 变为
hello=world // 第一个分号后面的是这个cookie的name和value，前面的是这个cookie的属性
expires=Sat, 20 Feb 2021 12:41:02 GMT // 属性
max-age=7200 // 属性
// 变为
hello: world
expires: expires=Sat, 20 Feb 2021 12:41:02 GMT
max-age: 7200

而后看每个属性，文档中5.2.*局部，算法会解析每个key-value，并放在一个cookie属性列表cookie-attribute-list外面，分析属性的时候不辨别大小写，expires和max-age转化为：

Expires: expires=Sat, 20 Feb 2021 12:41:02 GMT
Max-Age: expires=Sat, 20 Feb 2021 13:41:02 GMT

属性都剖析完之后，咱们能够失去和每条cookie相干的三个局部：cookie-name(cookie名)，cookie-value(cookie值)，cookie-attribute-list(cookie属性列表)。而后进入设置阶段，要害在5.3局部的第三步：

首先看下面生成的cookie属性列表外面是否蕴含Max-Age，如果蕴含，把cookie的过期工夫设置成最初一个Max-Age的值；如果没有Max-Age，才会查看是否蕴含Expires，如果蕴含，把cookie的过期工夫设置成最初一个Expires的值。这里last attribute的意思是咱们在给cookie赋值的时候，是能够写多个max-age的，这个时候取最初一个语法无效的max-age。

所以，简略的说：当expires和max-age同时呈现的时候，max-age的优先级更高。

Chrome截图也证实了max-age优先级更高：

假如曾经有一个名为hello的cookie，再次设置名为hello的cookie是新增还是批改？

咱们接着往下看5.3局部的第11、12步：

在11步中，首先判断已有cookie中是否有和本cookie同时具备雷同的name(名称)，domain(域)，path(门路)的cookie。
11.1 如果有，标记为old-cookie;
11.2 如果新cookie不是通过http的形式设置的，并且old-cookie设置了只能用于http，疏忽新cookie；
11.3 把新cookie的creation-time(创立工夫)字段更新为old-cookie的创立工夫；
11.4 从cookie表中移除old-cookie；
12 把新cookie插入到cookie表外面。

所以，能够得出：判断是新增还是批改的规范是cookie表中是否存在和新cookie的name，domain和path属性都一样的cookie。

在设置cookie的时候，如果设置后果和你想要的不符，能够依照下面例子的思路，查看RFC 6265 – HTTP State Management Mechanism文档的5.2和5.3局部。

cookie取值算法

这部分内容次要是基于以下两个问题：

1. 如何把字符串模式的cookie改成json的模式？
2. 如果设置了多个同名cookie，获取cookie时以哪个为准？

如何把字符串模式的cookie改成json的模式？

之所以会遇到这个问题，次要是解决上面这个场景：
如果通过WebSocket发送申请，在连贯建设的时候，是能够获取cookie信息的。然而，一旦连贯建设胜利，WebSocket始终连贯的时候，发送的数据是不会携带cookie信息的。如果在连贯建设之后，用户做了登出操作，这个时候其实不应该再响应用户申请，并且断开连接。

这时，问题来了，如何判断当用户登出的时候不再响应用户申请呢？
其实和http一样，每次申请带上cookie信息就能够了。只不过发送http申请的时候，浏览器帮咱们做了这部分工作。WebSocket的话，就得咱们手动增加上了。

咱们能够通过document.cookie获取cookie值，然而该值是一个示意所有cookie的字符串。为了获取某个cookie的值，咱们就得本人解析。要想解析，就得晓得cookie字符串的取值规定。这部分内容次要是RFC 6265 – HTTP State Management Mechanism文档的5.4局部。

1. 通过步骤4的第2步，能够晓得不同的cookie是通过分号和空格; 拼接起来的；
2. 通过步骤4的第1步，能够晓得最终后果中只会呈现cookie的name和value，cookie的属性并不会呈现。name和value是通过等号=拼接起来的；

所以，解析cookie的为代码能够示意如下：

var cookieStr = document.cookie
var cookieArray = cookieStr.split('; ') // 取得每个cookie的字符串模式组成的数组
var cookieObj = {}
cookieArray.forEach(item => {
    var index = item.indexOf('=') // 获取每个cookie字符串的key和value
    if (index !== -1) { // 没有应用split的起因是value外面也是能够蕴含=号的
        cookieObj[item.slice(0, index)] = item.slice(index + 1)
    }
})
console.log(cookieObj)

如果设置了多个同名cookie，获取cookie时以哪个为准？

例如，有上面几个cookie：

document.cookie = 'hello4=world4;'
document.cookie = 'hello5=world;'
document.cookie = 'hello5=worldShortPath;Path=/en-US'
document.cookie = 'hello6=world6;'

Chrome截图如下：

这部分内容还是在RFC 6265 – HTTP State Management Mechanism文档的[5.4局部]，只不过是在第2步。首先第1步是从cookie store（cookie列表）中找到和申请地址相干的所有cookie。而后执行第2步：

1. 通过步骤2的第1步，能够晓得具备更长path属性的cookie是放在后面的；
2. 通过步骤2的第2步，能够晓得path属性长度雷同的时候，creation-times创立工夫越早的放在后面。

综上，所有同名的cookie都会呈现在最终的cookie字符串中。并且，cookie是先依照path属性就行排序，而后依照creation-times创立工夫属性进行排序。然而，步骤二上面有正文，这种排序形式是实际得出的比拟好的排序形式，然而浏览器不肯定依照这种排序形式实现。

就下面的例子，咱们在设置完cookie之后，在控制台中查看document.cookie：

console.log(document.cookie) // hello4=world4; hello5=world; hello6=world6; hello5=worldShortPath

能够看到hello5的门路最短，所以放在最初，其余的依照设置程序，也就是创立工夫排序。

总结

在cookie赋值语法局部，咱们晓得document.cookie = ''不能用来革除cookie；
在cookie赋值算法局部，咱们晓得：

1. 同时设置了expires和max-age，max-age无效；
2. 假如曾经有一个名为hello的cookie，再次设置名为hello的cookie的时候，如果name，domain和path属性完全相同就是批改，否则是新增；

在cookie取值算法局部，咱们晓得：

1. 如何把字符串模式的cookie改成json的模式的时候，能够先通过; 宰割一次，在通过=宰割一次；
2. 如果设置了多个同名cookie，所有同名的cookie都会呈现在最终的cookie字符串中，依照path属性的长度和creation-times排序。

如果你遇到和cookie赋值语法、赋值算法和取值算法相干的问题，能够参照上述局部遇到的问题的解决思路去看看是否解决问题。

如有谬误，欢送留言探讨。

参考链接

1. RFC 6265 – HTTP State Management Mechanism
2. MDN document.cookie