在 web 开发中，cookie 是一种常见的应用，它可用于跨不同页面共享数据，以及持久保存用户信息。在 JavaScript 中， document 对象提供了访问 cookie 的 cookie 属性。但是，如果你不熟悉文档对象模型（DOM）和 cookie 的工作原理，也可能会花费大量时间来理解和使用它。本文将介绍如何使用 JavaScript 中的 document.cookie 属性来设置、读取和删除 cookie。

1. 读取 cookie

读取 cookie 最简单的方法是通过 JavaScript 访问 document.cookie 属性。这样就可以获得当前页面所有的 cookie。 document.cookie 属性返回一个包含所有 cookie 的字符串。如果当前页面没有 cookie，则返回空字符串。

例如：

```

console.log(document.cookie);

```

输出结果可能会像这样：

```

"user_name=my_name; age=25"

```

如果要读取特定的 cookie，需要采用一些技巧，因为 document.cookie 的返回值是一个字符串，该字符串包含多个 cookie。下面展示了如何获取特定的 cookie 值：

```

function getCookie(name) {

let cookies = document.cookie.split("; ");

for (let i = 0; i < cookies.length; i++) {

let cookie = cookies[i].split("=");

if (cookie[0] === name) {

return decodeURIComponent(cookie[1]);

}

}

}

```

此函数接收一个 cookie 名称作为参数，然后使用 split()分隔符分割 document.cookie 字符串，将每个 cookie 存储为字符串数组。接下来，使用一个 for 循环在数组中查找具有特定名称的 cookie，并使用 split() 方法将 cookie 名称和值分开。最终，如果找到该 cookie，则返回其值。

2. 创建 cookie

在浏览器中创建 cookie 的方法非常简单。只需在文档对象的 cookie 属性中设置一个字符串，该字符串包含要设置的 cookie 的名称、值以及其他可选参数。

例如，以下代码段将创建一个名为 user_name 的 cookie，其值为 my_user_name，有效期为 7 天：

```

let expiration = new Date();

expiration.setDate(expiration.getDate() + 7);

document.cookie = "user_name=my_user_name" + "; expires=" + expiration.toUTCString();

```

在这个例子中，我们首先使用 Date 对象创建了一个新日期，它的值是当前日期加上 7 天。然后将这个值传入 expires 参数，将 cookie 设置为 7 天有效期。最后，将 cookie 字符串分配给文档对象的 cookie 属性。

可以通过设置这些可选参数来控制 cookie 的一些属性，如下表所示：

| 参数 | 描述 |

| ------------ | ------------ |

| expires | cookie 的过期时间。 |

| path | 如果指定路径，则只有访问该路径的页面才能访问 cookie。 |

| domain | 如果指定域，则只有访问该域名的页面才能访问 cookie。 |

| secure | 如果设置为 true，则只有通过 HTTPS 协议发送的请求才能访问 cookie。 |

如果要为 cookie 设置多个属性，只需将这些属性添加到 cookie 字符串中即可。例如，以下是设置具有多个属性的 cookie 的示例：

```

let expiration = new Date();

expiration.setDate(expiration.getDate() + 7);

document.cookie = "user_name=my_user_name" + "; expires=" + expiration.toUTCString() + "; domain=example.com; path=/";

```

在此示例中，除了设置 cookie 的名称、值和到期日期外，还将 domain 参数设置为 "example.com"，将 path 参数设置为 "/"，这意味着只有来自 "example.com" 域名根目录的请求才能访问该 cookie。

3. 修改 cookie

要修改 cookie，可以使用与创建 cookie 相同的方法，只需将名称、值以及所有需要更改的其他属性添加到 cookie 字符串中即可。以下是修改 cookie 的示例：

```

let expiration = new Date();

expiration.setDate(expiration.getDate() + 7);

document.cookie = "user_name=new_user_name" + "; expires=" + expiration.toUTCString() + "; domain=example.com; path=/";

```

在这个例子中，我们修改了 user_name 的值，并将到期日期延长到 7 天。同样，我们还将 domain 参数设置为 "example.com" 和 path 参数设置为 "/"。

需要注意的是，如果要修改 cookie 的值、到期日期或任何其他属性，必须重新设置整个 cookie，即使名称和其他参数不变。

4. 删除 cookie

要删除特定的 cookie，可以将其到期日期设置为过去的日期，这样浏览器会自动将其删除。以下是删除特定 cookie 的示例：

```

let expiration = new Date();

expiration.setDate(expiration.getDate() - 1);

document.cookie = "user_name=; expires=" + expiration.toUTCString() + "; domain=example.com; path=/";

```

在这个例子中，我们将 user_name 的到期日期设置为过去的日期，即删除该 cookie。注意，为了删除 cookie，我们将其值设置为空字符串。

如果要删除网站上的所有 cookie，可以设置到期日期为过去的日期。以下是删除所有 cookie 的示例：

```

let cookies = document.cookie.split("; ");

for (let i = 0; i < cookies.length; i++) {

let cookie = cookies[i];

let expiration = new Date();

expiration.setDate(expiration.getDate() - 1);

document.cookie = cookie.trim() + "=; expires=" + expiration.toUTCString() + "; domain=example.com; path=/";

}

```

在这个例子中，我们首先获取当前所有 cookie，然后使用 for 循环将它们一一删除。注意，为了删除 cookie，我们将其值设置为空字符串。

总结

本文介绍了如何使用 JavaScript 中的 document.cookie 属性来读取、创建、修改和删除 cookie。请记住，在创建、修改或删除 cookie 时，需要设置其名称、值和到期日期，并使用可选参数设置其它属性，如域、路径和安全性。如果您了解了 cookie 的工作原理和文档对象模型（DOM），并使用合适的技巧，那么使用 JavaScript 中的 document.cookie 属性就会变得轻而易举。