前端使用cookie的两种方式详细讲解

前言

在前端开发中，Cookie 是一种常用的客户端存储机制，它允许服务器在客户端存储少量的数据，并在后续的请求中读取这些数据。Cookie 主要用于保持用户会话状态、个性化设置、跟踪用户行为等。前端使用 Cookie 主要有两种方式：通过浏览器自动管理（隐式使用）和通过 JavaScript 显式操作。下面将详细讲解这两种方式。

一、通过浏览器自动管理（隐式使用）

这种方式下，开发者不需要直接操作 Cookie，而是依赖于浏览器在 HTTP 请求和响应中自动添加和管理 Cookie。

1. 服务器设置 Cookie

服务器通过 HTTP 响应头中的 Set-Cookie 字段来设置 Cookie。例如，一个典型的 HTTP 响应头可能包含以下设置 Cookie 的指令：

Set-Cookie: sessionid=abc123; Path=/; Secure; HttpOnly

这里，sessionid 是 Cookie 的名称，abc123 是其值。Path 指定了 Cookie 的作用路径，Secure 表示 Cookie 仅在 HTTPS 请求中发送，HttpOnly 表示 Cookie 只能通过 HTTP 协议访问，而不能通过 JavaScript 访问，从而增加了安全性。

2. 浏览器存储和发送 Cookie

一旦服务器设置了 Cookie，浏览器就会在用户的计算机上存储这个 Cookie，并在后续向相同域（或子域）发送请求时自动包含这个 Cookie。例如，当用户再次访问该网站时，浏览器会在 HTTP 请求头中包含以下字段：

Cookie: sessionid=abc123

这样，服务器就可以通过读取这个 Cookie 来识别用户的会话状态。

二、通过 JavaScript 显式操作

虽然浏览器会自动管理大部分 Cookie，但有时开发者需要通过 JavaScript 显式地读取、修改或删除 Cookie。这通常用于需要在客户端动态处理 Cookie 数据的场景。

1. 读取 Cookie

JavaScript 不能直接访问带有 HttpOnly 属性的 Cookie，但对于其他 Cookie，可以通过 document.cookie 属性来读取。需要注意的是，document.cookie 返回的是一个包含所有 Cookie 的字符串，每个 Cookie 之间用分号和空格分隔，形如：

"sessionid=abc123; userid=xyz789"

要读取特定的 Cookie，需要手动解析这个字符串。例如：

function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

let sessionid = getCookie('sessionid');
console.log(sessionid); // 输出: abc123

2. 设置 Cookie

通过 JavaScript 设置 Cookie 通常是通过直接修改 document.cookie 属性来实现的。例如：

document.cookie = "userid=xyz789; Path=/; Secure; Expires=Wed, 09 Jun 2021 10:18:14 GMT";

这里，userid 是 Cookie 的名称，xyz789 是其值。Path 指定了 Cookie 的作用路径，Secure 表示仅通过 HTTPS 发送，Expires 设置了 Cookie 的过期时间。如果不设置 Expires 或 Max-Age，则 Cookie 会成为会话 Cookie，在浏览器关闭时自动删除。

3. 删除 Cookie

删除 Cookie 的方法是将该 Cookie 的过期时间设置为一个过去的日期。例如：

document.cookie = "userid=; Path=/; Expires=Thu, 01 Jan 1970 00:00:00 GMT";

这里，通过将 userid Cookie 的值设置为空字符串，并将其过期时间设置为一个遥远的过去，浏览器会删除这个 Cookie。

附：封装自己Cookie的增删改查函数

/*
	2017/02/20
	cookie操作
 */
function setCookie(key, value, iDay) {
	var oDate = new Date();
	oDate.setDate(oDate.getDate() + iDay);
	document.cookie = key + '=' + value + ';expires=' + oDate;

}
function removeCookie(key) {
	setCookie(key, '', -1);//这里只需要把Cookie保质期退回一天便可以删除
}
function getCookie(key) {
	var cookieArr = document.cookie.split('; ');
	for(var i = 0; i < cookieArr.length; i++) {
		var arr = cookieArr[i].split('=');
		if(arr[0] === key) {
			return arr[1];
		}
	}
	return false;
}

总结

前端使用 Cookie 的两种方式各有优缺点。通过浏览器自动管理 Cookie，开发者无需编写额外的代码，但需要依赖服务器的正确配置。通过 JavaScript 显式操作 Cookie，开发者可以更灵活地控制 Cookie 的读写和删除，但需要手动处理字符串解析和设置，且需要注意安全性问题（如避免跨站脚本攻击）。在实际开发中，应根据具体需求选择适合的方式，并遵循最佳实践来确保 Cookie 的安全性和隐私性。

到此这篇关于前端使用cookie的两种方式的文章就介绍到这了,更多相关前端使用cookie方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！