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.pathname domain = domain || window.location.hostname setCookie(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