HTTP之Cookie

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

巴特西

HTTP之Cookie

最新文章

热门文章