JavaScript Cookie详解：写入、读取、删除及安全实践52

在前端开发中，Cookie 是一种轻量级的数据存储机制，常用于存储用户会话信息、个性化设置等。JavaScript 提供了方便的方法来操作 Cookie，本文将深入探讨 JavaScript 如何写入 Cookie，并涵盖读取、删除及安全实践等方面。

一、Cookie 的基本概念

Cookie 是小型文本文件，由 Web 服务器发送到用户浏览器，并存储在用户的计算机上。每次用户访问同一网站时，浏览器会将 Cookie 发送回服务器。Cookie 通常包含键值对，例如 username=JohnDoe。这使得服务器可以识别用户并提供个性化服务。Cookie 的大小通常限制在 4KB 左右，且每个域最多可以存储数十个 Cookie。

二、使用 JavaScript 写入 Cookie

JavaScript 没有内置的 Cookie 操作 API，但我们可以通过操作文档的 `` 属性来实现 Cookie 的写入、读取和删除。写入 Cookie 的基本语法如下：```javascript
= "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
```

这段代码将名为 "username" 的 Cookie 写入浏览器，其值为 "JohnDoe"。让我们逐一分析各个参数：
username=JohnDoe: 这是 Cookie 的名称和值，用等号连接。名称和值都需要进行 URL 编码，尤其当包含特殊字符时。例如，空格应该编码为 `%20`。
expires=Thu, 18 Dec 2025 12:00:00 UTC: 这是 Cookie 的过期时间。如果省略此参数，Cookie 将在浏览器关闭时自动删除（会话 Cookie）。使用 UTC 时间格式非常重要，以确保浏览器能够正确解析时间。
path=/: 这是 Cookie 的作用路径。它指定了哪些页面可以访问此 Cookie。`/` 表示所有页面都可以访问。如果设置为 `/mypage/`，则只有 `/mypage/` 及其子目录下的页面才能访问此 Cookie。

其他可选参数包括：
domain=.: 指定 Cookie 的作用域。例如，`.` 表示所有 `` 及其子域名都可以访问此 Cookie。
secure: 指定 Cookie 只能通过 HTTPS 连接传输，增强安全性。
SameSite=Strict|Lax|None: 用于防止 CSRF（跨站请求伪造）攻击。Strict 表示 Cookie 只能通过同站请求发送；Lax 表示 Cookie 可以通过同站请求和一些第三方请求发送；None 表示 Cookie 可以通过任何请求发送，但需要与 `secure` 属性一起使用。

三、使用 JavaScript 读取 Cookie

读取 Cookie 需要解析 `` 属性，该属性是一个包含所有 Cookie 的字符串，每个 Cookie 由分号分隔。以下是一个读取指定 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;
}
let username = getCookie("username");
(username); // 输出 JohnDoe 或 null
```

这个函数首先找到包含指定 Cookie 名称的字符串，然后提取其值并返回。如果没有找到，则返回 `null`。

四、使用 JavaScript 删除 Cookie

删除 Cookie 的方法是设置 Cookie 的过期时间为过去的时间。例如：```javascript
= "username=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
```

这段代码将名为 "username" 的 Cookie 的过期时间设置为 1970 年 1 月 1 日，从而有效地删除了该 Cookie。

五、Cookie 的安全实践

使用 Cookie 时需要注意安全性：
使用 HTTPS：对于包含敏感信息的 Cookie，务必使用 HTTPS 加密连接，以防止信息被窃取。
设置 HttpOnly 属性：这可以防止 Cookie 被 JavaScript 访问，从而降低 XSS（跨站脚本）攻击的风险。这个属性需要在服务器端设置。
使用 SameSite 属性：有效防止 CSRF 攻击。
设置合适的过期时间：避免 Cookie 过期时间过长，减少安全风险。会话 Cookie 只在浏览器关闭时失效。
避免存储敏感信息： Cookie 不适合存储敏感信息，例如密码等。对于敏感信息，建议使用更安全的机制，例如 JWT（JSON Web Token）。
定期更新 Cookie：如果 Cookie 中的信息需要更新，则需要重新写入 Cookie，而不是修改其值。

总而言之，JavaScript 提供了基本的功能来操作 Cookie，但开发者需要谨慎地处理 Cookie，并遵循安全实践，以确保 Web 应用的安全性和可靠性。理解 Cookie 的工作原理和安全隐患对于构建安全的 Web 应用至关重要。

2025-03-15

上一篇：原生JavaScript AJAX详解：从入门到进阶

下一篇：JavaScript onclick 事件详解：从基础到进阶应用