JavaScript 获取、设置和删除 Cookie 的完整指南243

在 Web 开发中，Cookie 是一种小型文本文件，由服务器发送到用户的浏览器，并存储在用户的计算机上。它通常用于存储用户会话信息、网站偏好设置以及其他需要在用户访问网站时保持一致性的数据。 JavaScript 提供了方便的方法来访问、操作和管理这些 Cookie，本文将详细讲解如何在 JavaScript 中获取、设置和删除 Cookie。

一、获取 Cookie

获取 Cookie 的核心在于解析浏览器提供的 `` 属性。这个属性包含了所有当前存储在浏览器中的 Cookie，其格式为 "key1=value1; key2=value2; ...”。直接访问 `` 会返回一个字符串，需要进一步处理才能提取出单个 Cookie 的值。以下是一个常用的 JavaScript 函数，用于获取指定名称的 Cookie 值：```javascript
function getCookie(name) {
const nameEQ = name + "=";
const ca = (';');
for (let i = 0; i < ; i++) {
let c = ca[i];
while ((0) === ' ') c = (1, );
if ((nameEQ) === 0) return (, );
}
return null;
}
// 使用示例：获取名为 "username" 的 Cookie 的值
let username = getCookie("username");
(username);
```

这段代码首先将 Cookie 字符串按照分号分割成数组。然后，它遍历数组中的每个 Cookie，去除前导空格，并检查是否以指定的 Cookie 名称开头。如果找到匹配的 Cookie，则提取并返回其值；否则，返回 `null`。

需要注意的是，这段代码假设 Cookie 值中不包含分号。如果 Cookie 值本身包含分号，则需要更复杂的解析方法，例如使用正则表达式。

二、设置 Cookie

设置 Cookie 使用 `` 属性，并按照 "key=value; expires=date; path=path; domain=domain; secure" 的格式赋值。每个参数的含义如下：* key: Cookie 的名称。
* value: Cookie 的值。
* expires: Cookie 的过期时间，这是一个 Date 对象。如果没有设置 expires 属性，则 Cookie 为会话 Cookie，在浏览器关闭时失效。
* path: Cookie 的作用路径。如果未指定，则默认为当前页面路径。
* domain: Cookie 的作用域域名。如果未指定，则默认为当前域名。
* secure: 一个布尔值，指示 Cookie 是否只能通过 HTTPS 传输。

以下是一个设置 Cookie 的示例：```javascript
function setCookie(name, value, days) {
let expires = "";
if (days) {
let date = new Date();
(() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + ();
}
= name + "=" + value + expires + "; path=/";
}
// 使用示例：设置名为 "username"，值为 "johnDoe"，有效期为 7 天的 Cookie
setCookie("username", "johnDoe", 7);
```

这段代码根据 days 参数设置 Cookie 的过期时间，如果没有指定 days，则 Cookie 为会话 Cookie。`path=/` 表示 Cookie 在整个网站都有效。

三、删除 Cookie

删除 Cookie 的方法是设置 Cookie 的过期时间为过去的时间。以下是一个删除 Cookie 的示例：```javascript
function deleteCookie(name) {
setCookie(name, "", -1);
}
// 使用示例：删除名为 "username" 的 Cookie
deleteCookie("username");
```

这段代码调用 `setCookie` 函数，将 Cookie 的值设置为空字符串，并将过期时间设置为过去的时间，从而达到删除 Cookie 的目的。

四、安全性考虑

在使用 Cookie 时，务必注意安全性。以下是一些安全建议：* 使用 HTTPS: 对于包含敏感信息的 Cookie，应始终使用 HTTPS 来保护其传输安全。
* 设置 HttpOnly 标志: 这可以防止 Cookie 通过 JavaScript 访问，从而提高安全性。这需要在服务器端设置。
* 设置 Secure 标志: 这可以确保 Cookie 只能通过 HTTPS 传输。这需要在服务器端设置。
* 使用适当的过期时间: 设置合理的过期时间，避免 Cookie 长期存在于用户的浏览器中，从而降低安全风险。
* 避免存储敏感信息: 不要在 Cookie 中存储敏感信息，例如密码或信用卡号码。

五、总结

本文详细介绍了如何在 JavaScript 中获取、设置和删除 Cookie，并提供了相应的代码示例和安全建议。掌握 Cookie 的操作方法对于 Web 开发至关重要，因为它可以帮助我们存储和管理用户数据，并实现各种个性化功能。然而，在使用 Cookie 时，始终要牢记安全性，采取必要的措施来保护用户数据。

记住，Cookie 的功能和使用场景不断发展，理解其局限性和潜在安全风险，才能更好地应用于你的项目中。建议结合服务器端技术，例如或 PHP，来更有效地管理和控制 Cookie。

2025-03-14

上一篇：汤姆大叔教你玩转JavaScript：从入门到进阶的全面指南

下一篇：JavaScript动态表单：构建灵活高效的Web表单