JS，有关cookie的知识

谈起cookie，是大部分开发人员，不止是前端开发了解的知识，很多后端的小伙伴也了解的知识点，最近开发一个项目，当是应用的场景是后端登录返回的token，需要在前端进行一个本地存储，前端本地存储设计的技术很多，例如：localStorage，sessionStorage，indexDB，webSQL......甚至也可以把这个token放在例如vueX这种状态管理器的状态树上来进行共享。由于是跟公司的内部官网对接，是在内部官网的基础上去拓展一个新项目，也就是说除了我这个项目之外，还有其他的项目也要用到这个token，公司内部的官网是把这个登录凭证token放在顶级域名的cookie中，当时因为才刚刚接手这个项目，没太注意这一点，以至于后来踩了很多坑，这里就分享一下我踩过的坑，和有关cookie的一些知识点。

• 什么是cookie？

cookie是前端开发进行本地存储的一种方式，有大小限制，上限4kb；

• cookie的属性 

属性名	描述
name	Cookie的名称，Cookie一旦创建，名称便不可更改
value	Cookie的值，如果值为Unicode字符，需要为字符编码。如果为二进制数据，则需要使用BASE64编码
maxAge	Cookie失效的时间，单位秒。如果为整数，则该Cookie在maxAge秒后失效。如果为负数，该Cookie为临时Cookie，关闭浏览器即失效，浏览器也不会以任何形式保存该Cookie。如果为0，表示删除该Cookie。默认为-1。
secure	该Cookie是否仅被使用安全协议传输。安全协议。安全协议有HTTPS，SSL等，在网络上传输数据之前先将数据加密。默认为false。
path	Cookie的使用路径。如果设置为“/sessionWeb/”，则只有contextPath为“/sessionWeb”的程序可以访问该Cookie。如果设置为“/”，则本域名下contextPath都可以访问该Cookie。注意最后一个字符必须为“/”。
domain	可以访问该Cookie的域名。如果设置为“.google.com”，则所有以“google.com”结尾的域名都可以访问该Cookie。注意第一个字符必须为“.”。
comment	该Cookie的用处说明，浏览器显示Cookie信息的时候显示该说明。
version	Cookie使用的版本号。0表示遵循Netscape的Cookie规范，1表示遵循W3C的RFC 2109规范
expires	过期时间

本人在开发的时候，踩的坑最多的就是对于domain属性理解的不够透彻，导致后来了好几个bug；另外本人在操作cookie时使用了一个工具js-cookie来进行存储，获取，删除的操作的，详见地址：js-cookie官方访问链接；

注意：在获取指定名称的cookie时，不能根据域名来获取，只能通过cook的name来获取，这点js-cookie的官方文档写的很清楚了

注意：在remove指定名称的cookie时，要跟set这个cookie时的条件是一样的，要不然就清不掉cookie，就是这一个点，让我一个bug搞了好半天！

• cookie的domain属性

cookie的domain属性要重点记录一下，记录一下如何实现cookie的共享；一般实现单点登录的时候，经常用到这个属性，通常在父级域（顶级域）下设置cookie，然后在各个子级域下去拿到这个cookie，以实现共享；


所谓的单点登录，就是比如说我在www.a.com下登录了系统，这个时候我切换到了study.a.com这里，在study.a.com里面可以免登陆，直接是已经登录的状态；返回来，如果我在study.a.com里面退出了登录，那么在www.a.com也自动退出了登录；如果想要实现状态共享，以token为例子，就必须在存储token的时候，设置成顶级域名，把cookie的domain属性设置成：.a.com（注意不要忘记了domain属性是以点"."开头的），这样这个token既能在www.a.com下访问，也能在study.a.com下访问了

其他有关domain的注意点：

a1.test.com下我通过cookie属性设置了username属性，那么在a2.test.com下通过cookie就访问不到这个username属性，要是想让在a2.test.com下可以访问到username属性，那么就必须把username的domain属性设置成.test.com，这就可以访问了。

 

致此，本人的经验就分享完了，小伙伴们可以参考一下呀！喜欢就点个赞吧！