cookie是什么

浏览器存储在本地电脑上的一小段文本文件，cookie的存在主要是为了解决http协议无状态的问题，例如通过cookie来判断用户的登录状态，是否是某一个用户等。

cookie的结构 

    cookie以键值对的形式存储数据。

由expires（过期时间）、domain（cookie在哪些域下可以被发送）、path（cookie能在哪些路径下可以被发送） 、name（存放键值对）、secure（安全标志，cookie只能在htttps中有效）、httponly（不能通过脚本 Document.cookie访问cookie）。

浏览器和服务器之间如何传递cookie

    服务器通过在响应头部添加set-cookie字段向用户代理传递cookie信息。

浏览器通过在请求头部添加cookie字段向服务器传递之前保存的cookie信息 。

cookie的作用域 

domain和path确定了cookie的作用域。

domain确定了cookie在哪些域下可以被发送，path确定了哪些路经下可以被发送。

最需要值得注意的是当不给cookie设置domain时，默认cookie的作用范围为当前主机的域，不包含域的子域，当给cookie设置了domain，cookie的作用范围包含域的子域。比如：当前的路径的域为bai.com,cookie不设置domain，domain默认为bai.com,cookie只能在为bai.com的域的路径在被发送，aaa.bai.com域下不能发送当前这个cookie。当设置domain为bai.com时，cookie的作用范围是.bai.com,也就是包含了bai.com的子域，在bai.com和aaa.bai.com域下都可以发送cookie。

重点案例：

当创建cookie和修改cookie时要特别注意，比如我最近遇到的一个问题，退出登录无法清空token的问题，最后却发现在setCookie时没有给cookie设置域，在unSetCookie想清空cookie中的值时却给cookie设置了域。

      在创建或修改的时候，cookie的结构中除了过期时间，其他任一标示符不一样都会新创建一个cookie。

      在这个例子中，比如当前域是baidu.com,默认的domain为baidu.com,但是当设置了domain时，可以在浏览器中看到cookie中的domain为.baidu.com。两个domain不一样，两个cookie也不一样。后面设置的cookie要想覆盖前面的cookie的内容，必须保证name、path、domain、secure、httponly都是一致的。

export function setCookie(name, value, expires, path, domain, secure) {let cookieText = encodeURIComponent(name) + '=' + encodeURIComponent(value);if (expires instanceof Date) {cookieText += '; expires=' + expires.toGMTString();}if (path) {cookieText += '; path=' + path;}if (domain) {cookieText += '; domain=' + domain;}if (secure) {cookieText += '; secure';}document.cookie = cookieText;
}export function unsetCookie(name, path, domain, secure) {path = path || window.location.pathnamedomain = domain || window.location.hostnamesetCookie(name, '', new Date(0), path, domain, secure);
}

cookie的创建和删除

   创建时：

   名称和值是必须有的字段，且必须被URL编码（encodeURIComponent编码）

删除时：

    1、不设置过期时间，默认会一个会话时间，关闭浏览器，就被删除

   2、设置expires过期时间或设置max-age最大时间

   3、浏览器的cookie数量达到限制，超出的cookie会被删除

cookie的限制条件

  不同浏览器对cookie的限制不同，cookie数量20到50不等，大小一般不能超出4kb。

cookie的用途

• 会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
• 个性化设置（如用户自定义设置、主题等）
• 浏览器行为跟踪（如跟踪分析用户行为等）

参考资料：

MDN：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Cookies

http之cookie详解： https://www.kancloud.cn/kancloud/http-cookies-explained/48332