cookie,翻译过来叫做曲奇,俗称小饼干。
首先声明一下,cookie只有在浏览器中才会存在
小饼干的由来
从前有个人饿了,嫌弃做饭太麻烦,所以就发明了饼干这个方便存储又好吃的食品;这就是饼干的由来。(莫名其妙出现的想法,所以就写上了。哈哈哈)
上面纯属胡扯,但也有可能是真的,自己找度娘去验证
众所周知,http协议是无状态的协议,什么叫做无状态呢,就是服务器不知道上一次请求和这一次的请求是不是同一个人发送过来的,那么问题来了
假如,张三想打王者羞愧这款游戏,那么首先要验证身份才能进入游戏主页面,那么张三输入账号密码后进入了主页面。
之后张三点击了排位模式,此时,又发送了一条网络请求;当服务器收到这条请求后,就会出现问题,因为服务器不知道是谁给自己发送的这条请求,也不知道发送这条请求的人有没有资格玩排位模式,所以就又需要你重新输入账号与密码来进行验证。
而当游戏结束返回主页面的,服务器又不知道谁要返回主页面,有没有资格进入主页面,那么又需要输入账号密码。
这就是无状态所带来的弊端,因为不知道是是谁发送的这个请求,那么就需要一而再再而三的验证身份。那么如此下去也不是个事儿啊,怎么办呢?
于是服务器想了个办法,等你登陆后,我就给你颁发一个身份证,只要你在下一次请求中附带这个身份证,我就会知道你有没有这个资格
然而每个人都不可能仅仅只玩一个游戏,还有可能玩其他的游戏,那么就需要个东西,用来存储身份证,好,我们的主角出现了,cookie小饼干。
-
cookie就是用来存储各个身份证的。
-
cookie会根据请求的服务器不同,发送的身份证也不同。
-
一个卡片,我们可以称之为一个cookie。
小饼干的配料表(组成)
每一个cookie都会有如下属性
-
name: cookie的名字
-
value:cookie的值或者说内容,可以为任何信息
-
domain:可以使用该cookie的域,代表的意思是该cookie属于哪一个网站;比如 juejin.cn,代表这个cookie属于掘金这个网站,只有访问域为juejin.cn时,才有可能带上这个cookie
-
path:某个域内的详细的路径。比如当path为 /login时,则代表只有在路径为 “juejin.cn/login” 时才会带上这个cookie.
-
expire:过期时间,表示该cookie什么时候过期,不能用了。expire这里设置的时间必须为GMT时间;例如 Sat, 17 Sep 2022 12:42:59 GMT,表示的是格林威治时间为 2022年9月17日12点42分59秒 ,而代表的北京时间为 2022年9月17日20点42分59秒。北京时间是要比格林威治时间快8个小时的。当到达所设置的时,这个cookie就会被删除。
-
max-age:设置cookie的相对有效期,一般max-age和expire设置一个即可。例如 1000,表示1000毫秒后这个cookie将会失效。
如果既没有设置expire也没有设置max-age,那么该cookie的失效时间为该浏览器窗口的关闭时间
- secure:是否为安全连接时才会附带cookie。如果设置为true,那么就只有为https时才会附带该cookie,没有设置的话,那么所有的http请求都会附带。
- httpOnly:设置为true的话,这个cookie就不能使用js来获取该属性,仅仅用于传输。因为无法通过js获取,所以可用于防范xll攻击来读取cookie。
什么情况下会带着小饼干(出门时)
- 先判断该cookie是否过期,没有过期进行下一个判断。
- 判断domain 是否与要进行的http请求匹配,匹配的话下一个判断
- 判断path是否可以与要进行的http请求匹配,匹配的话下一个
- 判断httpOnly是否与要进行的http请求匹配,匹配的话下一步
- 将这个cookie放到http请求头中,发送请求时就会带上该cookie了
制作小饼干(设置添加cookie)
因为cookie几乎都是服务器颁发给浏览器的身份认证,所以大部分情况都是服务器设置的cookie,浏览器只需要将该cookie放到cookie卡包中就可以了。前端很少进行设置。
不过既然都写到这了,那就接着写下前端如何设置cookie吧;
//一句话
document.cookie = "name=value,domain='你想设置的域',path='你想设置的地址',max-age='还有多少毫秒过期',secure"
// ok搞定 仅仅写一个secure,代表这个属性为true
如果domain和path都没有写的话
在服务端设置的cookie的domain属性默认为当前域,path默认为"/",表示所有的路径都可以
而在浏览器端domain和path属性的默认值都是当前域和路径,
浏览器端没有httpOnly属性,因为httpOnly本来就是不让浏览器自己拿到这个cookie的值的,所以自己写个属性不让自己拿到,搞笑呢
既然前端都写了,后端设置也没几行,也写了得了
// 一个cookie
set-cookie:"name=value,domain='你想设置的域',path='你想设置的地址',max-age='还有多少毫秒过期',secure=false,httpOnly "
// 两个cookie
set-cookie:"name=value,domain='你想设置的域',path='你想设置的地址',max-age='还有多少毫秒过期',secure,httpOnly=false"
// 三个cookie
set-cookie:"name=value,domain='你想设置的域',path='你想设置的地址',max-age='还有多少毫秒过期'"
// 不写secure和httpOnly,那么默认就为false(这句话不写也应该都知道吧)
最后一个,如何吃掉小饼干(删除cookie)
删除cookie很简单了,让它过期了就没有了
// 服务端
set-cookie:"'要删除的name'='要删除的value',domain='要删除cookie的域',path='要删除cookie的path',max-age = -1"
// 客户端,浏览器端
document.cookie = "'要删除的name'='要删除的value',domain='要删除cookie的域',path='要删除cookie的path',max-age = -1"
无论是删除还是修改的时候都不要只写 '要删除的name'='要删除的value' ,因为有可能存在name相同而domain和path不相同的cookie
总结
因为我饿了,所以要去超市买小饼干了,剩下了懒得写了,收工