原来我一直不懂cookie

做前端已经两年了,却很少涉及到cookie方面的开发,也非常少关注cookie方面的知识,所以理解cookie非常浅显,

先说下自己浅显的理解吧:

cookie是基于http协议,cookie就是限制性的存储字符串的,我们可以通过document.cookie来存储字符串。

而最近手头上有个项目上涉及到有关于cookie的操作,即登录与退出,

对于这个需求,逻辑很简单

1.登录前的cookie检查

2.登录取的后端数据,再存到cookie

3.退出登录,清楚cookie.

这里面除了逻辑之外,涉及到了cookie取值和设值的问题。

这里我用到了jquery的第三方插件$.cookie来取值和设置。

根据之上的逻辑与$.cookie来取值和设值,这个任务很快就完成了,在本地apache测试没有问题。

接着就提交测试了,想不到问题马上出现了,目前的网站是a.xxx.com;而我们的另一个二级域名的网站b.xxx.com也有登录,即两个网站是可以设置document.domain="xxx.com"

在网站b.xxx.com登录成功后,已经写了个$.cookie("userid"),  在控制台打document.cookie="userid=112343",

第一次进a.xxx.com貌似是对的,因为$.cookie("userid")有值,所以也会进入已经登录状态,但点退出登录后,

再进b.xxx.com后还是登录状态。难道是cookie没有共享, 看下document.cookie="userid=112343;userid=0";

在这里很奇怪,在a.xxx.com退出登录时,已经设置了$.cookie("userid",0),但并没有覆盖之前的userid,而是追加了一个新的userid=0,之前的userid还存在。

看来清除cookie不是重新设置值这么简单。

在网上查了下资料,即清除cookie还需要增加个过期时间,即小过现在的时间就可以了,代码就修改成

$.cookie("userid", 0 , {expirs:new Date() -1000});

但还是没达到效果。

在这里也科普了下cookie的组成, cookie其实是由name,value, expires,path,domain等属性组成的,

如果写cookie的时候设置了path与domain, 则清除cookie时也需要设置相同的path,domain,  如果没有设置domain, 即取当前的location.host

所以原因找到了。

当b.xxx.com写cookie时设置了domain:xxx.com,和path:''/",   而我在a.xxx.com清cookie时只是设置了value和过期时间,并没有写domain和path, 所以并

没有清除原来的userid ,而是生成了新的userid,这个userid默认的domain为a.xxx.com,只是因为有过期时间,马上就消除了。但并没有清除之前的userid.

所以改代码为

$.cookie("userid",0,{expires:new Date()-1000, domain:"7k7k.com", path:"/"} 

即清除了之前的userid.

总结:

1.cookie不是简单的name和value两个属性,还有expires,domain,path等属性,这个可以专门找cookie的概念来熟悉。

2.清cookie必须与设cookie时的domain与path一致。否则就不会清除而是追加。

cookie应该还有其他的很多方面的问题,希望大家可以帮笔者补充。

看来在技术之路上很多东西是需要自身实践的,自己感觉和亲自做过是两码事,要想成为高手,必须踩足够多的坑,有过足够多的总结才行。

原文地址:https://www.cnblogs.com/fang9159/p/cookie.html