欢送关注公众号【码上出击】，更多精彩内容敬请关注公众号最新消息。
cookie是一个前端工程师每天都在打交道的内容，因而简直所有的前端面试都会问到cookie的相干常识。本文将与前端无关的cookie常识整顿成18个问题，笼罩了所有面试状况。
前世今生：Cookie和Session体系
咱们晓得，HTTP是一种无状态协定，无状态是指服务端对于客户端每次发送的申请都认为它是一个新的申请，上一次会话和下一次会话没有分割。
然而，很多场景下，咱们须要晓得下一次的会话和上一次的会话的关系（比方登陆之后咱们须要记住登陆状态），这个时候就引入了Cookie和Session体系。
Cookie： 客户端申请服务器时，如果服务器须要记录该用户状态，就通过response Headers向客户端浏览器颁发一个Cookie，而客户端浏览器会把Cookie保存起来。当浏览器再申请服务器时，浏览器把申请的网址连同该Cookie一起提交给服务器。服务器通过查看该Cookie来获取用户状态。
Session： 当服务器接管到申请时，就从存储在服务器上的有数session信息中去查找客户端申请时带过去的cookie的状态。如果服务器中没有这条session信息则增加一条session信息。
通常Cookie中存的是session信息通过计算后的惟一Id（sessionId）。
cookie的18个问题
1. cookie存储在哪里？
cookie个别是被浏览器以txt的模式存储在电脑硬盘中，供该浏览器进行读、写操作。
2. cookie是如何工作的？
- request
当浏览器发动一个申请时，浏览器会主动查看是否有相应的cookie，如果有则将cookie增加到Request Headers的Cookie字段中（cookie字段是很多name=value以分号分隔的字符串）。
- response
当服务端须要种cookie时，在http申请的Response Headers中增加Set-Cookie字段，浏览器接管到之后会主动解析辨认，将cookie种下。
3. cookie和session的区别？
- 存储地位不同： cookie数据寄存在客户的浏览器上，session数据放在服务器上。
- 存储大小不同： 个别单个cookie保留的数据不能超过4k, 单个域名最多保留30个cookie（不同浏览器有差别）；session则无大小和数量限度。
4. 什么是session级别的cookie？
session级别的cookie只针对以后会话存在，会话终止则cookie隐没。
当cookie没有设置expires的时候，该cookie只会在网页会话期间存在，当浏览器退出的时候，该cookie就会隐没。
浏览器中的体现为Expires/Max-Age的内容为Session。
5. cookie能够被谁来操作？
服务端和js都能够读/写cookie。
6. cookie各属性详解
- Name: cookie名
- Value: cookie值。
- Domain: cookie的域名。如果设成.example.com，那么子域名a.example.com和b.example.com，都能够应用.example.com的cookie;反之则不能够。
- Path: 容许读取cookie的url门路，个别设置为/。
- Expires： cookie过期工夫。不设置，则为Session会话期，页面退出时cookie生效。
- HttpOnly: 设置为true时，只有http能读取。js只能读取未设置HttpOnly的cookie。
- Secure: 标记为Secure的cookie，只有https的申请能够携带。
SameSite: 限度第三方url是否能够携带cookie。有3个值：Strict/Lax(默认)/None。（chrome51新增属性，chrome80+强制执行）
- Strict: 仅容许发送同站点申请的的cookie
- Lax: 容许局部第三方申请携带cookie，即导航到指标网址的get申请。包含超链接 ，预加载<link rel="prerender" />和get表单<form method="GET" />三种模式发送cookie
- None: 任意发送cookie，设置为None，（须要同时设置Secure，也就是说网站必须采纳https）
- Priority：优先级，chrome的提案（firefox不反对），定义了三种优先级，Low/Medium/High，当cookie数量超出时，低优先级的cookie会被优先革除。
7. js和服务端对cookie的操作有什么不同？
cookie有一个属性是HttpOnly，HttpOnly被设置时，表明该cookie只能被http申请读取，不能被js读取，具体的体现是:document.cookie读取到的内容不蕴含设置了HttpOnly的cookie。
8. js如何操作cookie
js操作读/写cookie的api是document.cookie，。
- 读cookie
document.cookie。
console.log(document.cookie); // cna=8fDUF573wEQCAWoLI8izIL6X; xlly_s=1; t=4a2bcb7ef27d32dad6872f9124694e19; _tb_token_=e3e11308ee6fe; hng=CN%7Czh-CN%7CCNY%7C156; thw=cn; v=0; 读取后的cookie是一个字符串，蕴含了所有cookie的name和value（用分号分隔），须要咱们自行将cookie解析进去。
- 写cookie
document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/;secure;'document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax' 一次只能写一个cookie，想要写多个cookie须要操作屡次。
1. expires默认为session级别。2. path默认为以后url的门路。3. domain默认为以后拜访域名。4. samesite默认为Lax。5. secure默认为false（即http）。- 删除cookie
只须要将一个曾经存在的cookie名字过期工夫设置为过来的工夫即可。
document.cookie = 'uid=dkfywqkrhkwehf23;expires=' + new Date(0) + ';path=/;secure;'- 批改cookie
从新赋值就好，旧值会笼罩新值。
留神：须要保障path和domain这两个值不变，否则会增加一个新的cookie。
Q：如果要设置多个cookie怎么办？<br/>
A：document.cookie一次只能设置一个cookie，须要操作屡次document.cookie。
9. 服务端如何读写cookie
第2节“cookie是如何工作的”通知咱们，服务端是能够读和写cookie的，从图中咱们能够看到，写cookie时，一条Set-Cookie写入一条cookie。读cookie时，所有的cookie信息都被放进了cookie字段中。
以express应用为例：
- 写cookie
res.setHeader('Set-Cookie', ['uid=123;maxAge: 900000; httpOnly: true']);// 或者res.cookie("uid",'123',{maxAge: 900000, httpOnly: true});- 读取cookie
console.log(req.getHeader('Cookie')); // 拿到所有cookie// 或者console.log(req.cookie.name);10. Cookie 大小和数量的限度
不同的浏览器对Cookie的大小和数量的限度不一样，个别，单个域名下设置的Cookie不应超过30个，且每个Cookie的大小不应超过4kb，超过当前，Cookie将会被疏忽，不会被设置。
11. 查看浏览器是否关上 Cookie 性能
window.navigator.cookieEnabled // true12. cookie 的共享策略是什么
domain和path独特决定了cookie能够被哪些url拜访。
拜访一个url时，如果url的host与domain统一或者是domain的子域名，并且url的门路与path局部匹配，那么cookie才能够被读取。
如果cookie如上图所示，那么一个url与可读取的cookie对应关系为：
| url | uid1 | uid2 | uid3 |
|---|---|---|---|
| https://edu.360.cn/caikuai/ | √ | √ | √ |
| https://edu.360.cn/ | √ | √ | × |
| https://360.cn/article/123.html | × | √ | × |
13. 跨域申请（CORS）中的cookie
首先cookie的SameSite须要设置为None。
其次对于将Access-Control-Allow-Credentials设置为true的接口（示意容许发送cookie），须要咱们在发送ajax申请时，将withCredentials属性设为true。
14. cookie的编码
document.cookie = 'uid=123;expires=Mon Jan 04 2022 17:42:40 GMT;path=/caikuai;domain=edu.360.cn;secure;samesite=lax' 从document.cookie的赋值中咱们能够看到，存在等于号、冒号、分号、空格、逗号、斜杠等特殊字符，因而当cookie的key和value中存在这几种符号时，须要对其进行编码，个别会用encodeURIComponent/decodeURIComponent进行操作。
Q: 为什么不应用escape和encodeURI进行编码呢？<br/>
A: 因为相比这两个api，encodeURIComponent能够将更多的字符进行编码，比方"/"。
15. cookie与web平安
1. cookie如何应答XSS破绽*
XSS破绽的原理是，因为未对用户提交的表单数据或者url参数等数据做解决就显示在了页面上，导致用户提交的内容在页面上被做为html解析执行。
惯例计划：对特殊字符进行解决，如"<"和">"等进行本义。
cookie的应答计划：对于用户利用script脚本来采集cookie信息，咱们能够将重要的cookie信息设置为HttpOnly来防止cookie被js采集。
2. cookie如何应答CSRF攻打
CSRF，中文名叫跨站申请伪造，原理是，用户登陆了A网站，而后因为某些起因拜访了B网站（比方跳转等），B网站间接发送一个A网站的申请进行一些危险操作，因为A网站处于登陆状态，就产生了CSRF攻打（外围就是利用了cookie信息能够被跨站携带）！
惯例计划：采纳验证码或token等。
cookie的应答计划：因为CSRF攻打外围就是利用了cookie信息能够被跨站携带，那么咱们能够对外围cookie的SameSite设置为Strict或Lax来防止。
16. 不同的浏览器共享cookie吗?
不同的浏览器相互不通信，彼此是独立的cookie。因而，咱们在一个浏览器上登陆了某个网站，换到另一个浏览器上的时候须要从新登陆。
17. cookie和localStorage/sessionStorage的差别
| 个性 | Cookie | localStorage | sessionStorage |
|---|---|---|---|
| 操作者 | 服务器和js | js | js |
| 数据的生命期 | 可设置生效工夫 | 除非被革除，否则永恒保留 | 仅在以后会话下无效，敞开页面或浏览器后被革除 |
| 存放数据大小 | 4K左右 | 个别为5M | 个别为5M |
| 与服务器端通信 | 每次都会携带在HTTP头中每次都会携带在HTTP头中 | 不与服务器通信 | 不与服务器通信 |
| 易用性 | 原生的Cookie接口不敌对，须要封装 | 接口易用 | 接口易用 |
18. 哪些信息适宜放到cookie中
cookie的增多无疑会减轻网络申请的开销，而且每次申请都会将cookie残缺的带上，因而对于那些“每次申请都必须要携带的信息（如身份信息、A/B分桶信息等）”，才适宜放进cookie中，其余类型的数据倡议放进localStorage中。