前端Cookie基础知识_前端设置cookie

一、简介

​ Cookie（也称为HTTP Cookie、Web Cookie、浏览器 Cookie等等）是服务器发送到用户浏览器并保存在本地的一小块数据，该数据通常是用户账号相关的信息，不同浏览器对Cookie的数量和大小限制不同，但一般来说，单域名下设置的cookie不能超过30个，单条cookie的大小不能超过4kb。如果Cookie超出浏览器限制，则会被浏览器忽略，不被保存。而且Cookie可以设置过期时间，到达过期时间后，浏览器就会把Cookie清除掉。

​ 设置Cookie的方式有两种：服务端通过在HTTP响应头中的Set-Cookie字段设置，以及在前端通过JS的document.cookie设置。在浏览器在拥有Cookie之后，每次向服务器发送请求时，都会自动携带对应地址的Cookie。但是用户可以手动操作浏览器接受、拒绝和删除Cookie，以及是否向服务器发送Cookie。

​ Cookie有两种类型：会话期Cookie和持久性Cookie。会话期Cookie不设置具体失效时间，只会在当前会话结束之后，被删除掉。被存储在内存中，当会话关闭时，该Cookie永久丢失。重新发起会话时，会创建一个新的会话期Cookie。持久性Cookie会设置好具体的有效期，被存储在磁盘中，浏览器关闭不会影响该Cookie，只有当有效期结束时，才会从磁盘中将该Cookie删除。在有效期内，会一直复用该Cookie。

​ Cookie可以解决HTTP无状态引发生的问题。HTTP无状态是指HTTP协议属于一种无状态协议，表示服务端不会在两个请求之间，保留任何状态（数据），请求之间没有关联，相对独立。如果后续请求需要用到前面请求中的相关状态，那就得进行重传，导致后续请求传送的数据量增大。而借助Cookie就可以帮助HTTP记录稳定的状态信息，减少数据的重传。

二、属性

cookie共拥有以下13条属性，前10条被广泛支持，后3条目前仅在chrome浏览器中能看到：

1、Name

​ cookie的名字，是唯一代表该cookie的key，不可包含空格、制表符、控制字符、()、<>、,、;、:、"、/、[]、{}等多种特殊字符。

2、Value

​ cookie的value值，代表要存储的数据，同样不可包含空格、制表符、控制字符、()、<>、,、;、:、"、/、[]、{}等多种特殊字符。与cookie的name属性以=号连接。

// 设置cookie
'cookie1=cookie1'
1
2

3、Domain

​ 设置cookie作用的域名，属性值为字符串，表示哪些域名及其子域名可以访问到该cookie（不区分协议和端口号，只针对域名），也就是哪些域名下的请求可以携带该cookie。默认为设置cookie时的当前域名，不包含其子域名。

​ 注意： 如果设置Domain的域名前面加 . ，则表示包含该域名的子域名，否则仅作用于该域名。在部分浏览器中只要设置了cookie的Domain属性，则浏览器在存储cookie时，会自动给域名前面加 .，使得子域名也能访问该cookie；相反，如果没有设置cookie的Domain属性，从而采取默认设置，则浏览器不会自动给域名前面加 .，子域名也就无法访问该cookie。（有待验证！！！）

// 设置cookie作用的域名为 .a.com
'cookie1=cookie1;Domain=.a.com;'
// 则a.com 和 b.a.com 都能访问该cookie
1
2
3

4、Path

​ 设置cookie作用的URL路径，属性值为/开头的字符串，该路径是基于Domain设置的域名基础上的路径，进一步限定cookie的作用域，表示只有匹配该路径下的请求才会携带这个cookie，该路径下的子路径也属于匹配。但是该路径的上级路径的请求，是属于不匹配的情况所以不会携带这个cookie的。路径开头的/可以理解为文件目录分隔符，所以此目录的下级目录也都可以匹配，都能携带这个cookie。

// 设置cookie的path为 /c
'cookie1=cookie1;Domain=.a.com;path=/c'
// 则 https://www.a.com/c、https://www.a.com/c/c1、https://www.a.com/c/c1/c11等
// 都可以携带该cookie

// 如果设置cookie的path为 /c/c1
'cookie1=cookie1;Domain=.a.com;path=/c/c1'
// 则 https://www.a.com/c/c1、https://www.a.com/c/c1/c11等路径可以携带该cookie
// 但是https://www.a.com/c 不会携带该cookie
1
2
3
4
5
6
7
8
9

5、Expires

​ 设置cookie的有效期，属性值为符合HTTP-Date规范（例如：Wed, 21 Oct 2023 07:28:00 GMT）的时间戳数据，到达该有效期时间后，cookie会失效被删除掉。我们可以通过设置cookie的Expires属性为一个已经过去的时间，从而使cookie失效。

​ 注意： 该有效期时间是以客户端的时间为准。

// 设置Cookie的有效期 到达该时间后Cookie过期
'cookie1=cookie1;Expires=Wed, 21 Oct 2023 07:28:00 GMT;'
// 获取某个时间点的UTC时区的时间戳数据
let date = new Date('2023-2-28 1:30:00').toUTCString()
1
2
3
4

6、Max-Age

​ 设置cookie多长时间后失效，属性值为Number数据，单位为秒。如果属性值为正数，表示该cookie会在正数秒后失效，然后被浏览器清除掉。如果属性值为**0，则表示该cookie立即失效，被浏览器清除掉。如果属性值为负数**，则表示该cookie是一个临时cookie，存储在浏览器内存中，仅在当前浏览器窗口以及本窗口打开的相关子窗口有效，当窗口关闭后，该cookie就会失效，然后被浏览器清除掉。

​ 注意： 如果Expires属性与 Max-Age 属性，同时被设置，则 Max-Age 属性的优先级高，Expires属性将不起作用。如果Expires属性与 Max-Age 属性都没有设置，则为会话期cookie，关闭浏览器后失效。

// 设置Cookie的有效期 10秒后Cookie失效
'cookie1=cookie1;Max-Age=10;'
// 同时设置Expires和Max-Age时，Max-Age优先级高 10秒后cookie失效
'cookie1=cookie1;Expires=Wed, 21 Oct 2023 07:28:00 GMT;Max-Age=10'
// 使cookie立即失效
'cookie1=cookie1;Max-Age=0;'
1
2
3
4
5
6

7、Size

​ 表示cookie存储的数据大小，单位是字节，一般单条cookie的总大小不能超过4kb，也就是4096字节。

​ 注意： 4kb是单条cookie的大小限制，而不是所有cookie的总大小限制。

8、HttpOnly

​ 设置cookie是否可以被前端通过JS的document.cookie访问到，如果设置为true，则不能被JS操作，只能被浏览器和服务端操作，在请求中会被正常携带，反之，则可以被JS操作。通常设置该属性的cookie，都用于存储一些用户身份或者安全凭证之类的信息，可以防范XSS攻击（跨站脚本攻击）。

9、Secure

​ 设置cookie是否仅在使用HTTPS协议（localhost 除外）的请求中使用，设置该属性后的cookie，不会被使用http协议的请求携带。

10、SameSite

​ 设置cookie是否可以随着跨站请求一起发送，即限制第三方cookie，属性值有三种：

① Strict

​ 最严格的设置，在跨站时，完全禁止第三方cookie，只有在设置当前cookie的站的请求中（同站），才会携带这个cookie。也就是只有在网页的URL与请求的路径一致时，才会携带当前cookie。

​ 注意： 在域名相同，但协议不同（HTTP和HTTPS）时，浏览器也会将其视为不同站点。

② lax

​ 默认设置，在跨站时，不会携带第三方cookie，但是在导航到源站点的get请求中，当前cookie会被携带。导航到源站的情况总共有下面三种：

③ none

​ 最宽松的设置，无论是同站请求还是跨站请求，都会携带当前cookie。但是要注意设置该属性值时，必须同时设置Secure属性，保证安全的上下文环境，否则将不生效。

​ 在设置了SameSite属性值为Strict 或 Lax 之后，就能很好的防范CSRF攻击（跨站请求伪造攻击）了。

11、SameParty

​ 为了实现First-Party Sets策略所设定，但还未被广泛支持。后续补充。。。

12、Partiton Key

​ 未知，后续补充。。。

13、Priority

​ chrome的提案，未被广泛支持，用来设置cookie的优先级，从低到高：Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先清除。

三、操作

1、创建

① 服务端Set-Cookie

​ 服务端可以使用Set-Cookie响应头部向浏览器发送要设置的cookie信息，形式为键值对。浏览器在响应头中识别到``Set-Cookie之后，会根据其内容创建对应的cookie。然后会在后续的请求中将创建的cookie发送回服务器。

​ 如果想要同时设置多个cookie，则需要在响应头中包含多个Set-Cookie，一个Set-Cookie只能设置一个cookie。

Set-Cookie: cookie1=value1
Set-Cookie: cookie2=value2; Expires=Wed, 21 Oct 2023 07:28:00 GMT;
Set-Cookie: cookie3=value3; Max-Age=600
Set-Cookie: cookie4=value4; Domain=.a.com;Path=/b
Set-Cookie: cookie5=value5; HttpOnly
Set-Cookie: cookie6=value6; SameSite=None; Secure
1
2
3
4
5
6

② 前端JS的document.cookie

​ 前端可以通过JS的document.cookie获取或设置与当前页面相关的cookie信息，形式为键值对。

​ 同样，这种方法一次只能设置一个cookie，如果想设置多个cookie，则需要多次使用document.cookie。

document.cookie = "cookie1=value1"
document.cookie = "cookie2=value2;Expires=Wed, 21 Oct 2023 07:28:00 GMT;"
document.cookie = "cookie3=value3;Domain=.test.com;Path=/b"
document.cookie = "cookie4=value4;SameSite=None; Secure"
1
2
3
4

③ 用户可以在浏览器开发者工具中的Application中直接创建cookie

2、修改

​ 在Domain和Path相同的情况下，前端可以通过重新给cookie赋值的方式来修改cookie，新设置的内容将会覆盖掉旧的内容。但如果Domain和Path发生了变化，那么将会生成一个新的cookie，与原来的cookie并存，虽然他们name相同，但却属于不同的cookie。

// 创建cookie
document.cookie = "cookie1=value1"
// 修改cookie的值
document.cookie = "cookie1=value1111"
// 修改cookie的值并修改path 相当于另外创建一个cookie
document.cookie = "cookie1=value123;path=/b"
1
2
3
4
5
6

​ 除了path不同，其他属性都相同的两个cookie，是两个独立的cookie：

​ 当然用户也可以在浏览器开发者工具中的Application中直接修改cookie的内容和属性。

3、删除

​ 目前前端并不存在直接删除cookie的方法，我们只能通过设置cookie的Expires属性为一个已经过去的时间或者设置Max-Age属性设置为0，从而使cookie失效，然后被浏览器给清除掉。

// 删除cookie3 最好指明path 避免删错cookie
document.cookie = "cookie1=;path=/;max-age=0"
// 或
document.cookie = "cookie1=;path=/;expires=Thu, 01 Jan 1970 00:00:00 UTC;"
1
2
3
4

​ 当然用户也可以在浏览器开发者工具中的Application中直接删除cookie。

4、查询

​ 前端可以通过documen.cookie获取到当前网页所有相关的cookie的name和value，以 name=value 的形式：

const allCookies = documen.cookie;
console.log(allCookies)
1
2

​ 当然用户也可以在浏览器开发者工具中的Application中查看所有cookie。

四、相关文档

Cookie

document.cookie

HTTP-Date

SameSite

Set-Cookie