cookie在前端还是比较总重要的，接下来将总结一下cookie知识点。
将从以下方面去聊一聊cookie。
1、什么样的数据适合放到cookie中。
2、cookie是如何设置的。
3、cookie如何进行携带传送给服务器的。
4、cookie如何实现删除的。

1、什么样的数据适合存放在cookie中?

我们在详细了解这个问题之前，需要先了解cookie是如何工作的？
cookie是存放在浏览器中的，在每一个浏览器安装目录下，都存在一个文件夹，存放
着不同域下对应的cookie。当浏览器通过http请求某一个域时，此时浏览器就会将
该域下面的cookie自动放入request header中。我们需要注意，浏览器自动帮我们
携带，此时如果很多无关紧要的数据都存放在cookie中，都会随着请求发送给后台，
这样就无形当中增加了网络开销。此时我们再想想什么数据在每一次都需要?其实我
们的身份认证信息在每一次都需要携带，所以存放在cookie的数据最合适的是身份认
证信息，其他信息都不合适。
在localStorage出现之前，cookie一直背开发者所滥用，导致很多的无关紧要的数
据被请求携带到服务器。cookie也存在一些限制，每一个域下的cookie最多是4KB,
每一个域下的cookie最多存在20条。

2、cookie的格式

我们在控制台打印document.cookie就可以拿到当前域下面的全部可以访问的
cookie了(也就是非httpOnly的cookie),注意观察的cookie,是由key=value的形
式组成，并且在每一个key,value之间使用分号和空格隔开。

3、cookie的属性选项

我们使用cookie肯定需要设置一些属性，存在这些属性就可以知道cookie的过期时
间，发送到那个域名和发送到哪个路径。cookie的属性包
括:expires,domain,path,secure,httpOnly。在设置这些属性的时候也是需要
按照格式设置的。如下所示。每一个属性后面需要跟一个分号和空格。

"key=name; expires=Thu, 25 Feb 2016 04:18:00 GMT; domain=ppsc.sankuai.com; path=/; secure; HttpOnly"

3.1、expires属性

expires属性表示的是：cookie的过期时间，使用GMT表示，可以使用
toUTCString()或者使用toGMTString()来获取。
console.log(new Date().toUTCString())  //Wed, 26 Jan 2022 13:14:47 GMT
console.log(new Date().toGMTString())  //Wed, 26 Jan 2022 13:14:47 GMT
expires=Wed, 26 Jan 2022 13:14:47 GMT,表示在2022年1月26日13:14分之
后失效。如果在新增cookie的时候，没有增加expires属性，则表示会话阶段，也就
是在浏览器关闭时，cookie就消失。expires是在http1.0中的属性，在http1.1中
新增了max-age,max-age表示从当前创建开始，到cookie过期的时间。max-age可
以为三个值，一个是负值，0，正值。当max-age为负值时，表示cookie为会话阶
段。当max-age为0时，表示删除cookie。当cookie的值为正数时，则
expires=max-age + 当前时间。

3.2、domain和url

domain表示域名，url表示路径。两者结合起来表示当浏览器向某一个域名和路径发
送http请求时，需要携带符合域名和路径条件的cookie。
什么是符合条件的域名和路径条件呢？
例如domain设置为"baidu.com",url设置为"/"，当浏览器访问域名
为"api.baidu.com"或者"baidu.com"的时候携带cookie，当url为"/"或者
为"/home"..均携带cookie。
这里需要注意的是xhr请求默认不会携带cookie的。

3.3、secure

secure是保证网络请求安全的，也就是说如果设置cookie为secure，则发送的请求
必须是https的。如果是http的请求，即使域名一样，也不会从浏览器携带到服务
器。但是不携带并不代表没有，我们在浏览器上却可以查看到。

3.4、httpOnly

我们在设置cookie的时候，默认httpOnly为空。如果某条cookie设置了
httpOnly,则就是js不能构操作该条cookie(查看，修改，删除)。

那么为什么有的cookie存在httpOnly，则有的cookie则不存在httpOnly呢?
原因为：如果在某一个用户登录过的网站，其cookie没有设置httpOnly,则当用户
受到xss攻击(跨站脚本攻击)的时候，也就是向该网站注入一段js脚本，如果这个脚
本读取的是用户的cookie，并且将该cookie发送给攻击者，则用户信息泄露，攻击
者可以拿到该用户登录信息模拟用户登录，造成用户不安全。

4、如何设置cookie

设置cookie存在前端设置和后端设置。

4.1、服务器设置cookie

当我们发送ajax请求的时候，服务器返回的请求头(response header),在
response header中存在set-cookie字段，我们可以通过返回set-cookie向浏览
器返回cookie数据。每一个set-cookie只能设置一个cookie。并且服务端可以设
置的属性有expires,domain,path,secure,httpOnly。具体如图所示。

4.2、客户端设置cookie

在控制台执行下面代码(cookie的其余属性没有设置，则设为默认值)
document.cookie = "name=ssss"

在客户端设置cookie的时候，并不是全部的属性都可以设置，可以设置的属性
有:expires,domain,url,secure(这个在https协议的网站中才能设置成功)，
httpOnly在客户端不能设置。

5、设置多个cookie

上图设置多个cookIe,最终只能设置成功一个。如果想要在客户端设置多个，使用如下代码。
document.cookie ="name=dl; "
document.cookie ="age=20; "
document.cookie ="sex=man; "

6、修改和删除cookie

1、修改：直接进行赋新值，不过必须保证domain/url属性不变，如果改变则直接新增一个。
2、删除：直接赋新值，不过必须保证domain/url属性不变，并且将expires的时间设置为过去的时间。

7、补充内容

1、在cookie中只有key/domain/path都相同时，才能进行覆盖。
2、在设置domain的value设置多个点，则任何子域名都可以访问。
如不不设置点，则只有该domain才能访问。