JavaScript创建、读取和删除cookie

创建、读取、删除cookie是前端JavaScript开发中常见的任务。下面，我将分别详细讲解这三个任务的步骤。

创建cookie

创建cookie的步骤如下：

1. 使用document.cookie属性设置cookie的键值对。
2. 设置cookie的可选参数（如过期时间、路径、域名等）。

下面是一个设置名为"username"，值为"john"的cookie：

document.cookie = "username=john";

设置了cookie之后，我们可以使用document.cookie属性读取当前文档中的所有cookie。它会返回一个包含所有cookie键值对的字符串，每个cookie键值对之间用分号加空格"; "分隔。

下面是一个显示当前文档中所有cookie的代码：

console.log(document.cookie);

读取cookie

读取cookie的步骤如下：

1. 使用document.cookie属性读取当前文档中所有cookie。
2. 解析cookie字符串以获取特定的cookie值。

下面是一个获取名为"username"的cookie的代码：

function getCookie(name) {
  const cookies = document.cookie.split("; ");
  for (const cookie of cookies) {
    const [key, value] = cookie.split("=");
    if (key === name) {
      return value;
    }
  }
}
const usernameCookie = getCookie("username");
console.log(usernameCookie);

在上述代码中，我们定义了一个getCookie函数接受一个指定cookie名字，然后在读取到cookie字符串中找到符合该指定cookie名字的键值对，返回该cookie的值。

删除cookie

删除cookie的步骤如下：

1. 设置指定cookie的过期时间为过去的时间即可。

下面是一个删除名为"username"的cookie的代码：

const expireDate = new Date();
expireDate.setHours(expireDate.getHours() - 1);
document.cookie = "username=; expires=" + expireDate.toUTCString() + "; path=/";

在上述代码中，我们获取了当前时间，并将小时数减去1，即设置过期时间为1小时前，这样使得浏览器会删除该cookie名字为"username"的cookie。

另一种删除cookie的方式是删除cookie时只指定名字与值（忽略所有可选参数），如下：

document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";

这里我们手动设置时间为1970年1月1日0点0分0秒（当前时间之前），浏览器会将cookie删除（即便该cookie已经过期）。可选参数path指定cookie的路径。