JavaScript 中 Cookie 的创建、读取与删除完整指南

概要

“cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。” - w3school

从 JavaScript 的角度来看，Cookie 本质上是一系列存储在客户端计算机中的字符串信息，主要用于客户端与服务器之间的数据交互。开发者可以通过 document.cookie 属性来读取或设置这些值。尽管 Cookie 常用于前后端通信，服务端语言同样具备存取 Cookie 的能力。

一、设置 Cookie

在 JavaScript 中，可以通过 document.cookie 属性来创建、读取、修改和删除 Cookie 信息

设置一个 Cookie 信息，[document.cookie=“name=value”]需要以name=value形式的字符串来定义需要注意，一次只能设置一个名/值对

document.cookie = "name=张三";

Cookie 存储的值不能包含分号（;）、逗号（,）、等号（=）以及空格，因为这些特殊符号是 Cookie 的标识符，用于标识和设置 Cookie 的存储格式，所以：

• 在储到 Cookie 时，可以使用 js 内置的 encodeURIComponent() 函数对数据进行编码
• 在读取 Cookie 时，可以使用 js 内置的 decodeURIComponent() 函数对数据进行解码

document.cookie = "url=https://www.baidu.com/;?id=123";
//https://www.baidu.com/  实际存储

document.cookie = "url=" + encodeURIComponent("https://www.baidu.com/;?id=123");

1. 给 Cookie 设置过期时间

默认情况下，Cookie 是会话级别的，也就是说，它们将在用户关闭浏览器时删除。但是在实际开发中，Cookie 常常需要长期保存，可以通过设置 Cookie 的过期时间来使其在一定时间内保持有效。以下是一个将 Cookie 的过期时间设置为一天的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + 1);
document.cookie = `username=John; expires=${expirationDate.toUTCString()}`;

2. 指定可访问 Cookie 的路径

在设置 Cookie 时，可以使用path参数来指定可访问该 Cookie 的路径。path参数用于限制 Cookie 在哪个路径下有效。只有与指定路径匹配的 URL 才能访问该 Cookie。

以下是设置 Cookie 时指定路径的示例：

document.cookie = "username=John; path=/example";

在上面的示例中，将"username"的 Cookie 设置为只能在以/example开头的 URL 路径下访问。比如，只有/example、/example/page1、/example/page2等路径下的页面才能读取这个 Cookie。

默认情况下，如果不指定 path 参数，Cookie 的默认路径是设置 Cookie 的页面所在的路径。例如，如果在http://example.com/login页面设置了一个 Cookie，则该 Cookie 的默认路径为/login。

需要注意的是，每个路径都是一个独立的上下文，Cookie 只能在其设置的路径及其子路径下访问。如果路径设置不正确，可能导致 Cookie 无法在预期的页面访问或被删除。

因此，在设置 Cookie 时，根据实际需求合理指定 path 参数，以确保 Cookie 在预期的路径下有效。

3. 指定可访问 Cookie 的主机名

在设置 Cookie 时，可以使用 domain 参数来指定可访问该 Cookie 的主机名。domain 参数用于限制 Cookie 在哪个主机名下有效。只有与指定主机名匹配的 URL 才能访问该 Cookie。

以下是设置 Cookie 时指定主机名的示例：

document.cookie = "username=John; domain=example.com";

在上面的示例中，将"username"的 Cookie 设置为只能在 example.com 主机名下的所有 URL 访问。这意味着，只有 example.com 以及其子域名（如subdomain.example.com）下的页面才能读取这个 Cookie。 默认情况下，如果不指定 domain 参数，Cookie 的默认主机名是设置 Cookie 的页面所属的主机名。例如，在http://example.com/login页面设置了一个 Cookie，则该 Cookie 的默认主机名为 example.com。

需要注意的是，通过指定 domain 参数来限制 Cookie 的主机名时，需要遵循一些规则：

• 主机名必须具有两个或更多的域名部分。例如，example.com 是有效的，但.com 或 localhost 是无效的。
• 主机名的设置仅适用于子域名，而无法在父域名下设置 Cookie。

因此，在设置 Cookie 时，根据实际需求合理指定 domain 参数，以确保 Cookie 在预期的主机名下有效。

二、读取 Cookie

需要在服务器环境下读取（获取） Cookie 同样使用 document.cookie 即可，该属性会返回一个字符串，字符串中包含除 max-age、expires、path 和 domain 等属性之外的所有 Cookie 信息

读取 Cookie 的值，它会返回一个以分号分隔的键值对字符串，包含当前在浏览器中存储的所有 Cookie 。要获取特定 Cookie 的值，需要解析该字符串。

为了获取单个 Cookie 的值，我们可以通过 split() 函数将包含 Cookie 信息的字符串拆分为数组，然后再获取某个 Cookie 的值， 以下是一个获取名为"username"的 Cookie 值的示例：

function getCookie(name) {
  const cookieString = document.cookie;
  const cookies = cookieString.split('; ');
  for (const cookie of cookies) {
    const [cookieName, cookieValue] = cookie.split('=');
    if (cookieName === name) {
      return cookieValue;
    }
  }
  return null;
}

const username = getCookie('username');

也可以通过正则表达式

document.cookie = "name=张三";
let cookie = document.cookie;
let key ='name'
let reg = new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)");
console.log(cookie.match(reg)[2])

三、删除 Cookie

删除 Cookie 与修改 Cookie 类似，只需要重新将 Cookie 的值设置为空，并将 expires 属性设置为一个过去的日期即可 以下是一个删除名为"username"的 Cookie 的示例：

const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() - 1);
document.cookie = 'username=; expires=${expirationDate.toUTCString()}';

需要注意的是，Cookie 存储在浏览器中，可以被用户修改或删除。Cookie 还有一些限制，例如每个域名下的 Cookie 数量和存储大小都有限制。 在实际开发中，除了使用原生 JavaScript 操作 Cookie ，还可以使用现代 JavaScript 框架和库提供的 Cookie 管理工具，如 js-cookie、universal-cookie等，以简化 Cookie 的操作和管理。

四、 封装构造通用的 Cookie 处理函数

Cookie 的处理过程比较复杂，并具有一定的相似性。因此可以定义几个函数来完成 Cookie 的通用操作，从而实现代码的复用。下面列出了常用的 Cookie 操作及其函数实现。

//设置cookie
function setCookie(obj,time){
	let date = new Date(new Date().getTime()+ time*24*60*60*1000).toUTCString();
	for(let key in obj){
		document.cookie = key+"="+obj[key]+"; expires="+ date;
	}
},


//读取cookie
function getCookie(key){
	return document.cookie.match( new RegExp("(^|\\s)"+ key +"=([^;]+)(;|$)"))[2]
},


//删除cookie
function removeCookie(key){
	setCookie({[key]: "" }, -1)
}

总结

到此这篇关于 JS Cookie 的设置、读取和删除方法的文章就介绍到这了,更多相关 JS Cookie 设置、读取、删除内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站！