JavaScript Cookies介绍

封面图 • 2025-12-31 • JavaScript

JavaScript 中的 **Cookies** 是一种在客户端（浏览器）存储数据的方式，通常用于记录用户信息、会话状态等。它们由服务器通过 HTTP 响应头 `Set-Cookie` 发送，并由浏览器保存，之后每次请求该网站时都会自动将 cookies 附加到 HTTP 请求头中。

---

## 🧩 一、什么是 Cookies？

Cookies 是小文本文件，存储在用户的计算机上，包含以下信息：

- 名称（Name）
- 值（Value）
- 过期时间（Expires/Max-Age）
- 路径（Path）
- 域名（Domain）
- 安全性（Secure）
- HttpOnly 标志

---

## 📌 二、Cookies 的用途

1. **会话管理**：比如登录状态、购物车信息。
2. **个性化设置**：如语言偏好、主题选择。
3. **跟踪用户行为**：用于分析或广告投放（需注意隐私政策）。
4. **保持用户登录状态**：通过 session ID 等方式实现。

---

## 💻 三、JavaScript 如何操作 Cookies？

### ✅ 1. 读取 Cookies

```javascript
document.cookie; // 获取所有 cookie 字符串
```

返回格式类似：
```
username=JohnDoe; age=30; theme=dark
```

### ✅ 2. 设置 Cookie

```javascript
document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2025 12:00:00 UTC; path=/";
```

- `expires`：设置过期时间（可选）
- `path`：指定 cookie 的路径（默认是当前路径）
- `domain`：指定域名（默认是当前域名）
- `secure`：只在 HTTPS 下发送
- `HttpOnly`：防止 JavaScript 访问（安全）

> 注意：使用 `HttpOnly` 需要通过服务器设置。

### ✅ 3. 删除 Cookie

要删除一个 cookie，可以将其过期时间设为过去的时间：

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

---

## ⚠️ 四、注意事项

| 项目 | 说明 |
|------|------|
| 大小限制 | 每个 cookie 最大 4KB，每个域名最多 20 个 cookie |
| 安全性 | 不适合存储敏感信息（如密码），建议使用 `HttpOnly` 和 `Secure` |
| 跨域问题 | 默认不跨域，需要设置 `domain` 和 `path` |
| 存储位置 | 浏览器本地存储，不会自动加密 |

---

## 🔐 五、Cookie 与 LocalStorage 的区别

| 特性 | Cookie | localStorage |
|------|--------|--------------|
| 存储位置 | 浏览器 | 浏览器 |
| 存储大小 | 4KB/cookie，20 per domain | 5MB |
| 自动发送 | 是（随请求发送） | 否 |
| 有效期 | 可设置过期时间 | 永久 |
| 安全性 | 可被 JS 读写 | 可被 JS 读写 |
| 是否支持跨域 | 需配置 domain/path | 不支持跨域 |

---

## 📚 六、示例代码

```javascript
// 设置 cookie
document.cookie = "user=alice; max-age=3600; path=/; secure";

// 读取 cookie
console.log(document.cookie);

// 删除 cookie
document.cookie = "user=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
```

---

## 🧠 七、总结

- Cookies 是客户端存储数据的一种方式，常用于会话管理和用户跟踪。
- JavaScript 提供了 `document.cookie` API 来操作 cookies。
- 使用时要注意安全性、大小限制和隐私合规性（如 GDPR）。

如果你有具体的应用场景或想了解更高级的功能（如 Session Storage、LocalStorage、Web Storage 等），欢迎继续提问！