一. 前言(一些废话)
浏览器Cookie相信各位点进这篇文章的小伙伴应该不陌生了，它是前端领域中一个非常重要的内容，当然也是面试的一个考点，不知道各位小伙伴是否真正掌握了Cookie呢?当然没有掌握也是没有关系的，可以跟着小编的脚步一起来学习一下前端Cookie，没有熟练掌握的小伙伴看完这篇文章可能会对浏览器Cookie有一个新的认知。
PS:我这里讲的是前端Cookie并非后端领域的Cookie如果点赞够多可以考虑写一篇后端的。
二. Cookie
1. 为什么会有Cookie
web应用程序是使用HTTP协议传输数据的，然而HTTP协议是无状态的协议，一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话。
你可能会有这样的经历，登录一个网站的时候会提醒你要不要记住账户和密码，这样下次来你就不用再次输入账号和密码了。这就是cookie的作用，当我们再次访问的时候，方便服务器直接根据我们的Cookie来直接取上一次去过的东西（对于，每一个cookie服务器会对这个cookie存储上一次我们拿过的数据，下一次对于同一个cookie的时候，就直接在这里取。
2. Cookie的特性
当服务器收到 HTTP 请求时，服务器可以在响应头里设置一个 Set-cookie 选项，浏览器接收到响应后会自动保存下 Cookie，之后浏览器对该服务器的每一次请求中都会通过请求头把 Cookie 信息发送给服务器，这就是Cookie的来源。
当然Cookie在浏览器中也是有个数和大小的限制，大小一般是4k，个数的问题每种浏览器的限制都不同，可以参考下面的表格。
| FF | Chrome | Safari | Opera | IE7.0/8.0 | |
|---|---|---|---|---|---|
| Cookie个数 | 每个域为50个 | 每个域为53个 | 没有个数限制 | 每个域名为30个 | 每个域名为50个 |
| Cookie大小 | 4097个字节 | 4097个字节 | 4097个字节 | 4096个字节 | 4095个字节 |
值得注意的是:Cookie存储信息不安全（不能存放重要的信息）,Cookie中有域（domain）和路径的概念,浏览器是一个比较安全的环境，所以不同的域之间不能直接访问（js的同源策略限制）
PS:但是因为浏览器的每次请求都会携带上 Cookie，会带来额外的开销，而且存储量比较小，所以后来浏览器推出了新的 Api(web stoeage Api和 indexedDb)
3. 浏览器Cookie
打开浏览器的开发者工具 都可以在【应用】选项卡中看到当前浏览器所存储的Cookie，如下图。
其中字段名含义:
- Name：cookie的名字(键)
- Value：cookie存放的值
- Expires：指cookie过期的时间（该时间为世界时间 UTC时间）也称为格林威治时间
- Max-Age: 指cookie最大的存活有效期（单位：秒）
- Domain: 指的是cookie当前的域
- Path:指cookie当前的路径
- Size: 指cookie存放的大小
- Secure: 指cooke的安全属性
4. 跨站和跨域
跨站和跨域，是了解Cookie的必备知识
| 定义 | 示例 | |
|---|---|---|
| 跨域 | 两个 URL 的“协议+主机名+端口”3者只要有一个不一致就是跨域 | http://www.taobao.com/和https://www.taobao.com/ |
| 跨站 | 两个 URL 的 eTLD+1 不相同 | a.github.io 和 b.github.io |
| eTLD | effective top level domain （有效顶级域名） | .com、.co.uk、.github.io |
| eTLD+1 | 有效顶级域名+二级域名 | taobao.com |
所以只要顶级域名和二级域名一样就是同站
再举两个例子 a.com 于 b.com 就属于跨站了，而 a.a.com 与 b.a.com 则是属与同站，因为二级域名和顶级域名相同，关于跨域详细的讲解就不在这里展开了，点赞多的话小编可以考虑后面写一篇相关文章。
三. Cookie操作
1. 获取Cookie
可以在浏览器控制台输入 document.cookie 就可以获取到当前所在网站标记存储的部分Cookie信息。
获取到的是一串字符串，序列化方式是: k1=v1;k2=v2;k3=v3
为什么说获取到的只是部分的Cookie，因为只要HttpOnly打钩的js是无法获取和操作的，这种Cookie是只能由服务端和浏览器来操作，通常这种Cookie是用来存储一些用户身份信息或者安全相关的凭证的
可以使用下面的代码将Cookie储存到一个对象中
function deal(){ var cookie = document.cookie;
var arr = cookie.split('; ');//注意是 分号空格
var obj = {};
arr.forEach(function(item){
var itemArr = item.split('=');
obj[itemArr[0]] = itemArr[1];
})
return obj;
}
2. 设置Cookie
在浏览器中设置Cookie也是通过 document.cookie 来操作的，以键值对的方式向浏览器存储Cookie
可以看到已经设置成功了
3. 修改Cookie
变更修改已经存储于浏览器的Cookie也很简单还是使用document.cookie 来操作只要将相同key的值重新赋值一遍就相当以修改了已经存储完成的Cookie值
可以看到更新成功
4. 删除Cookie
删除Cookie的值也很简单，还是使用document.cookie 来操作只需要将要删除的Cookie对应的键置空，然后再加上max-age的值为-1
执行完成后这条Cookie就消失了
四. Cookie属性
1. Cookie属性Domain
Domain是用来设置Cookie能够作用到的主机地址，存储在浏览器时不携带协议和端口。因为端口和协议不同并不会影响Cookie但是Cookie的部分属性只有在Https下才能有效，这也是Cookie的特性之一，不区分协议和端口。
如果前面有个. 如下 .baidu.con 就证明当前的Cookie可以作用于当前域及其子域，假如下面的Cookie在 niuma.baidu.com 中是可以访问到的 而前面没有这个.的Cookie在 niuma.baidu.com 中无法访问到 只能在baidu.com 中访问到。
在设置Cookie时如果没有设置Domain属性那么这个Cookie只能作用于当前域
有一个注意的点就是设置Cookie时设置了domain属性向下面
在浏览器存储Cookie的地方竟然变成了 .uicool123.com ??? 这是值得大家注意的地方
设置domain=.uicool123.com 的时候还是跟上面的情况一样，也就是说两种doamin属性的设置方法是一样的。
关于domain还有最后一点值得注意，就是在子域中可以给父域设置Cookie
比如我们在 niu.uicool123.com 中设置Cookie ，doamin属性设置为 .uicool123.com 那么我们可以在 uicool123.com 中获取到这个Cookie也可以在 hhh.uicool123.com 中获取到这个Cookie 因为这个Cookie是作用于uicool123.com和它的子域的。
但是我们不能在当前域的子域或者跨域设置Cookie，比如我们在 uicool123.com 的控制台设置 Cookie时domain属性不能设置为 hhh.uicool123.com 或者 baidu.com
2. Cookie属性path
Cookie的path用来指定URL的路径
假如我们在a.com/a的控制台设置如下的Cookie
document.cookie='myname=牛马;path=/a'
那么只要前缀是 a.com/a 的路径下都可以访问到这个Cookie 比如 a.com/a/b/c a.com/a/b
而在前缀不是a.com/a 的路径下是无法访问这个Cookie的 比如 a.com/b a.com/b/a
这个属性用的比较少，一般都是设置为/路径
3. Cookie属性expires
expires 属性是来设置Cookie有效期相关的属性，expires 指定Cookie失效的具体时间注意: 当与max-age属性同时存在时max-age的优先级会更高
列如设置一个 2022年11月26日凌晨1点10过期的Cookie
document.cookie=`myname=牛马;expires=${new Date('2022-11-26 01:10:00').toUTCString()}`
可以看到已经设置好了
这个expires属性也可以设置为过去的时间,生效后浏览器会立即删除这条Cookie
当一个Cookie既不包含expires也不包含max-age属性那么，这个Cookie就是一个会话Cookie，当你关闭浏览器时这个Cookie会被自动删除，刷新和关闭当前页面是不会删除的。
4. Cookie属性max-age
max-age 属性也是用来设置CooKie有效期相关的属性，max-age 指定Cookie多少秒后失效
比如我们设置一个600秒后过期的Cookie
document.cookie=`myname=牛马;max-age=600`
可以看到设置成功
注意:当expires 和 max-age属性都设置时max-age的设置会优先，如果max-age设置为负值那就是删除Cookie
当一个Cookie既不包含expires也不包含max-age属性那么，这个Cookie就是一个会话Cookie，当你关闭浏览器时这个Cookie会被自动删除，刷新和关闭当前页面是不会删除的。
5. Cookie属性httponly
httponly 是和Cookie安全性紧密相关的一个Cookie，上面也有提及到。
只要HttpOnly打钩的js是无法获取和操作的，这种Cookie是只能由服务端和浏览器来操作，通常这种Cookie是用来存储一些用户身份信息或者安全相关的凭证的。
这种Cookie只能通过服务端响应设置
在浏览器设置这个属性的Cookie时这个Cookie会被浏览器直接忽略掉
5. Cookie属性secure
secure 这个属性用来告诉浏览器这个Cookie只能用https协议传输，如果服务端的响应中包含有secure属性的Cookie，但是当前的协议是http的，那么浏览器会直接忽略这个Cookie
当我们在浏览器创建了一个带有secure的属性
那么当我们向https://a.com 发起请求时就会携带上这个Cookie
而当我们请求http://a.com时的时候是不会携带这个Cookie的
6. Cookie属性samesite
关于samesite这是一个变动比较大的属性，samesite属性可以限制跨站请求时Cookie发送，samesite的值有三个
| samesite属性值 | 作用 |
|---|---|
| None | 不论是否跨站都发送Cookie |
| Lax | 部分跨站请求情况下发送Cookie(默认值) |
| Strict | 跨站不发送Cookie |
关于samesite属性为None的Cookie，虽然约束性最弱但是只有这个cookie是HTTPS协议进行传输的时候浏览器才认为它是有效的另外这个cookie.必须要添加secure属性，否则无法保存。
我们可以创建4个Cookie
可以看到在没有设置samesite属性时浏览器并不会自动添加lax。
当请求同域地址时这4个Cookie都会带上
注意:samesite只有在跨站请求的时候才会起作用文章来源：https://www.toymoban.com/news/detail-442547.html
五. 结尾
最后还有几个不怎么常用的Cookie属性小编就不细说了，感兴趣的小伙伴可以自行查找相关文章，如果文章有错误的地方各位读者朋友可以在评论区指出，感谢大家的阅读。文章来源地址https://www.toymoban.com/news/detail-442547.html
到了这里，关于一篇文章带你搞懂前端Cookie的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
