摘要：协议当初为了让协议尽量简洁，制定为无状态协议，即指每次请求之前是相互独立的，当前请求并不会记录它的上一次请求信息。其实是失效日期，必须是格式的时间可以通过或者来获得。根据规范，浏览器访问只会携带的，而不会携带的。
HTTP协议当初为了让协议尽量简洁，制定为无状态协议，即指每次request请求之前是相互独立的，当前请求并不会记录它的上一次请求信息。那么问题来了，开发中经常需要用到状态记录，比如日常的登录网站，不可能每次登录都要客户重新输入密码，这样用户体验肯定会很差，那如何让无状态的http协议将状态记录下来呢？
于是浏览器厂商发明了cookie来解决这个难题。
Cookie总是保存在客户端中，按在客户端中的存储位置，可分为内存Cookie和硬盘Cookie，设置了过期时间Expires（Cookie的几个属性之一）的Cookie会存储在硬盘里面，不同操作系统cookie的储存路径会有所不同，而没有设置该属性的Cookie会存储在内存里面，此时浏览器的选项卡可以共享同一个cookie信息，关闭浏览器就会清除该Cookie！
首先看一下cookie在前后端交互中的应用：
第一次验证成功后，服务端会在响应头信息中带上“set-cookie”字段，浏览器监测到该字段之后，会把其中的值对号入座写入浏览器的cookie的属性中
存储在cookie中的数据，在它过期之前，每次都会被浏览器自动放在http请求中，如果这些数据并不是每个请求都需要发给服务端的数据，浏览器这设置自动处理无疑增加了网络开销；但如果这些数据是每个请求都需要发给服务端的数据（比如身份认证信息），浏览器这设置自动处理就大大免去了重复添加操作。所以对于那设置“每次请求都要携带的信息（最典型的就是身份认证信息token）”就特别适合放在cookie中。而服务器端通过验证cookie中的信息，实现了验证，也让浏览器端省去了每次都需要输入登录信息的麻烦。
为了实现cookie的作用，除了name和value之外，设计者还给它增加了七个属性，分别是expires/max-age、domain、path、secure、HttpOnly、samesite，这些属性是通过cookie选项来设置的，在设置任一个cookie时都可以设置相关的这些属性，当然也可以不设置，这时会使用这些属性的默认值。
Expires和Max-Age
expires选项用来设置“cookie 什么时间内有效”。expires其实是cookie失效日期，expires必须是 GMT 格式的时间（可以通过new Date().toGMTString()或者 new Date().toUTCString() 来获得）。
如expires=Thu, 25 Feb 2016 04:18:00 GMT表示cookie讲在2016年2月25日4:18分之后失效，对于失效的cookie浏览器会清空。如果没有设置该选项，则默认有效期为session，即会话cookie。这种cookie在浏览器关闭后就没有了，属于内存cookie。而max-age就是cookie写入之后的有效时长，比如max-age=600就是600秒后，cookie则会失效。max-age的优先级高于expires
domain 和 path
domain是域名，path是路径，两者加起来就构成了 URL，domain和path一起来限制 cookie 能被哪些 URL 访问，domain属性的默认值是创建cookie的网页所在服务器的主机名。不能将一个cookie的域设置成服务器所在的域之外的域，要想cookie在多个二级域名中共享，需要设置domain为顶级域名。
HttpOnly
告知浏览器不允许通过脚本document.cookie去更改这个值，同样这个值在document.cookie中也不可见。但在http请求张仍然会携带这个cookie。注意这个值虽然在脚本中不可获取，但仍然在浏览器安装目录中以文件形式存在。
secure
安全标志，指定后，只有在使用SSL链接（https）时候才能发送到服务器，如果是http链接则不会传递该信息。就算设置了secure 属性也并不代表他人不能看到你机器本地保存的 cookie 信息，所以不要把重要信息放在cookie中。
samesite
主要为了防御CSRF攻击（跨站点请求伪造）而添加的cookie属性，SameSite=Strict严格模式，表明这个 cookie 在任何情况下都不可能作为第三方 cookie，有兴趣了解可以查下“csrf攻击”的资料
除了服务器端返回的set-cookie字段，浏览器端也可以对cookie进行操作，有npm为我们封装好的插件js-cookie: https://www.npmjs.com/package...，不过我们还是用原生方法手动实现一遍
获取cookie：
在控制台输入document.cookie，或者js代码中console.log(document.cookie)可以得到下图：
可以看到，cookie是一个个键值对（“键=值”的形式）加上分号空格隔开组合而成， 形如： "name1=value1; name2=value2; name3=value3"，可以用正则表达式来提取等号后面的值
function getCookie(name) {
var value = "; "+ document.cookie;
var parts = value.split("; " + name + "=");
if(parts.length === 2) {
return parts.pop().split(";").shift();
}
}
写入cookie
function setCookie (name, value, day) {
if(day !== 0){ //当设置的时间等于0时，不设置expires属性，cookie在浏览器关闭后删除
var expires = day * 24 * 60 * 60 * 1000
var date = new Date(+new Date()+expires);
document.cookie = name + "=" + escape(value) + ";expires=" + date.toUTCString()
}else{
document.cookie = name + "=" + escape(value)
}
}
注意：expires使用GMT或UTC格式的时间， 我这里没有指定路径(path)和域(domain)， 当没有指定路径时默认为当前路径下，如对 于“https://home.cnblogs.com/u/ma...”下设置的cookie，其path为"/u/maderlzp"， 其domain为当前域名“home.cnblogs.com”
删除cookie
设置cookie过期时间小于当前时间，那么就会删除该cookie
function deleteCookie(name) {
document.cookie = name + "=; expires=Thu, 01 Jan 1970 00:00:01 GMT;"
}
Cookie具有不可跨域名性。根据Cookie规范，浏览器访问Google.com只会携带Google.com的Cookie，而不会携带Baidu.com的Cookie。Google.com也只能操作Google.com的Cookie，而不能操作Baidu.com的Cookie
<完>
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110285.html
摘要：协议当初为了让协议尽量简洁，制定为无状态协议，即指每次请求之前是相互独立的，当前请求并不会记录它的上一次请求信息。其实是失效日期，必须是格式的时间可以通过或者来获得。根据规范，浏览器访问只会携带的，而不会携带的。 HTTP协议当初为了让协议尽量简洁，制定为无状态协议，即指每次request请求之前是相互独立的，当前请求并不会记录它的上一次请求信息。那么问题来了，开发中经常需要用到状态记...
摘要：响应组成状态消息报头响应正。状态组成服务器协议的版本，服务器发回的响应状态代码和状态代码的本描述。向指定的资源发出显示请求。向指定资源提交数据，请求服务器进行处理例如提交表单或者上传文件。回显服务器收到的请求，主要用于测试或诊断。 引言 这篇文章是我各处收集有关于http的知识，不成体系，爱看不看?，看完点赞。 我们输入网址之后发生的事情 输入网址并回车（URL 包括 协议名称 域名...
摘要：那么，怎么才能让服务器识别浏览器身份，认为是同一用户的多次请求，从而达到数据共享呢这就要用到会话技术了，本质上就是数据持久化存储。 由来 浏览器和服务器间的数据交互，就是会话。 但是呢，http协议是无状态无记忆的，就会导致业务的不连续性。 [不连续性的说明]譬如你在xxx网站A界面登录成功，当你点击跳转到B界面时，又会提示请登录。 ...
阅读 2804·2023-04-26 01:00
阅读 744·2021-10-11 10:59
阅读 2972·2019-08-30 11:18
阅读 2666·2019-08-29 11:18
阅读 1016·2019-08-28 18:28
阅读 3008·2019-08-26 18:36
阅读 2129·2019-08-23 18:16
阅读 1063·2019-08-23 15:56
