JavaScript Cookie详解：设置、获取、删除及安全策略183

在网页开发中，Cookie 扮演着重要的角色，它允许网站在用户的浏览器上存储少量数据，以便在用户后续访问时记住用户的偏好、状态或身份信息。JavaScript 提供了便捷的方法来操作 Cookie，本文将深入探讨 JavaScript 中 Cookie 的设置、获取、删除以及相关的安全策略，帮助你更好地理解和运用 Cookie。

一、 Cookie 的基本概念

Cookie 是一种由服务器发送到浏览器并存储在用户计算机上的小文本文件。每个 Cookie 都包含一个名称、一个值以及其他可选的属性，例如过期时间、路径和域。浏览器会在后续向同一服务器发送请求时，将相应的 Cookie 发送回服务器，以便服务器识别用户。

Cookie 的存在使得 Web 应用能够实现诸如：记住用户登录状态、保存购物车商品、个性化网页内容等功能。然而，由于 Cookie 存储在客户端，安全性也需要注意，稍后我们会详细探讨。

二、 JavaScript 设置 Cookie

在 JavaScript 中，设置 Cookie 通常使用 `` 属性。该属性是一个字符串，表示所有当前浏览器中存在的 Cookie 的集合。要设置一个新的 Cookie，只需要将一个新的键值对添加到 `` 字符串中即可。其基本语法如下：```javascript
= "name=value; expires=date; path=path; domain=domain; secure";
```
* name=value: Cookie 的名称和值。名称和值都需要进行 URL 编码，以避免特殊字符导致问题。例如，空格需要编码为 `%20`。
* expires=date: Cookie 的过期时间。这是一个可选属性，如果不指定，Cookie 将在浏览器会话结束时过期（会话 Cookie）。可以使用 `new Date()` 对象来指定一个具体的过期日期和时间。例如：`expires=Thu, 18 Dec 2025 12:00:00 UTC`。
* path=path: 指定 Cookie 的有效路径。这是一个可选属性，默认为设置 Cookie 的当前页面路径。如果设置为 `/`，则 Cookie 在整个网站域名下都有效。
* domain=domain: 指定 Cookie 的有效域名。这是一个可选属性，默认为设置 Cookie 的当前域名。可以设置为父域名，使 Cookie 在子域名下也生效。例如，如果设置 `domain=.`，那么 `` 和 `` 都可以访问该 Cookie。
* secure: 这是一个布尔属性，如果设置为 `secure`，则 Cookie 只能通过 HTTPS 连接传输。这有助于提高安全性，防止 Cookie 被窃取。

示例：设置一个名为 "username"，值为 "John Doe"，并在 7 天后过期的 Cookie```javascript
let date = new Date();
(() + (7 * 24 * 60 * 60 * 1000)); // 7 天后
= "username=John%20Doe; expires=" + () + "; path=/";
```

三、 JavaScript 获取 Cookie

获取 Cookie 需要解析 `` 字符串。由于该字符串以分号分隔，我们可以将其分割成数组，然后逐个解析每个 Cookie。```javascript
function getCookie(name) {
const cookies = (';');
for (let i = 0; i < ; i++) {
const cookie = cookies[i].trim();
if ((name + '=')) {
return decodeURIComponent(( + 1));
}
}
return null;
}
let username = getCookie("username");
(username); // 输出：John Doe
```

这段代码首先将 `` 分割成数组，然后遍历每个 Cookie，如果找到匹配的名称，则返回解码后的值。`decodeURIComponent()` 函数用于解码 URL 编码后的值。

四、 JavaScript 删除 Cookie

删除 Cookie 的方法是设置 Cookie 的过期时间为过去的时间。这样浏览器就会自动删除该 Cookie。```javascript
function deleteCookie(name) {
= name + '=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}
deleteCookie("username");
```

这段代码将 Cookie 的过期时间设置为 1970 年 1 月 1 日，从而达到删除 Cookie 的目的。需要注意的是 `path` 属性也要指定，确保在正确的路径下删除 Cookie。

五、 Cookie 的安全策略

由于 Cookie 存储在客户端，因此安全性非常重要。以下是一些安全策略：* 使用 HTTPS: 在 HTTPS 连接下传输 Cookie，防止 Cookie 被窃取。 `secure` 属性非常重要！
* 设置 HttpOnly 属性: 这个属性只能通过服务器端设置，它可以防止 Cookie 被 JavaScript 访问，从而提高安全性，避免 XSS 攻击。
* 设置 SameSite 属性: 这个属性可以限制 Cookie 的发送场景，例如 `SameSite=Strict` 只有用户直接访问网站时才会发送 Cookie，防止 CSRF 攻击。 `SameSite=Lax` 则允许跨站点的GET请求携带cookie。

* 使用短生命周期 Cookie: 尽量减少 Cookie 的生命周期，以降低安全风险。
* 定期更新 Cookie: 定期更新 Cookie 可以降低被攻击的风险，比如改变 Cookie 的值或增加随机值。

* 避免存储敏感信息: 不要在 Cookie 中存储敏感信息，例如密码、信用卡号等。

总而言之，Cookie 是 Web 开发中一个强大的工具，但需要谨慎使用并注意安全性。理解 JavaScript 中 Cookie 的设置、获取、删除以及相关的安全策略，才能更好地利用 Cookie 提升用户体验并保证网站安全。

2025-05-21

上一篇：JavaScript进阶：深入理解马赛克算法与图像处理

下一篇：JavaScript if() 语句详解：条件判断与流程控制的利器