Cookies 的作用

Cookies 是浏览器存储在客户端的一小段数据（一般 4KB 以内），主要用于 保持状态 和 跨页面存储数据。它们通常由服务器设置，并随请求发送到服务器。

Cookies 主要用途

1. 会话管理（Session Management）

   • 维持用户登录状态（例如 sessionId）。
   • 记录用户访问的状态（如购物车、浏览历史等）。

2. 个性化（Personalization）

   • 记住用户的偏好设置（如网站的语言、主题模式等）。

3. 跟踪与分析（Tracking & Analytics）

   • 统计用户访问数据（如 Google Analytics）。
   • 进行广告投放（如用户画像、兴趣定向广告）。

---

项目中 Cookies 的常见使用场景

1. 维持登录状态

当用户登录后，服务器生成一个 sessionId 并存入 Set-Cookie，浏览器会在后续请求中自动携带该 cookie，让服务器识别用户身份。

Set-Cookie: sessionId=abc123; HttpOnly; Secure; SameSite=Strict

📌 适用于：

• 后端管理系统（如 Vue + Node.js）
• 需要身份验证的 Web 应用

---

2. 记住用户偏好

例如，一个网站可以使用 cookie 记录用户的主题偏好：

document.cookie = "theme=dark; path=/; max-age=31536000"; // 有效期 1 年

📌 适用于：

• 主题模式（深色 / 浅色）
• 语言选择（zh-CN / en-US）
• 记住上次访问的页面

---

3. 购物车

对于未登录用户，购物车信息可以保存在 cookie 中：

document.cookie = "cartItems=[{id:1,qty:2}]; path=/; max-age=86400";

📌 适用于：

• 电商网站
• 需要暂存数据但不想依赖 localStorage

---

4. 统计分析 & 广告投放

广告网络使用 cookie 跟踪用户行为，如：

Set-Cookie: trackingId=xyz789; Domain=.example.com; Path=/; Secure

📌 适用于：

• Google Analytics
• Facebook Pixel
• 个性化广告投放（Remarketing）

---

Cookies vs 其他存储方式

存储方式	数据大小	是否随请求发送	适用场景
Cookies	~4KB	✅（每次请求）	认证、状态管理
LocalStorage	~5MB	❌（仅本地）	缓存数据，长期存储
SessionStorage	~5MB	❌（仅本地）	临时存储（关闭标签页失效）

---

Cookies 在项目中的使用建议

1. 安全性

   • HttpOnly: 防止 JavaScript 读取（防止 XSS）
   • Secure: 仅 HTTPS 传输
   • SameSite=Strict: 预防 CSRF 攻击

2. 避免滥用

   • 不存敏感信息（如密码）
   • 对于大数据，使用 localStorage 或 sessionStorage

3. 跨域问题

   • 需要 Access-Control-Allow-Credentials: true
   • Domain 需设置为主域（如 .example.com）

---

总结

• 如果是用户登录管理，建议后端 使用 sessionId + cookie 来保持状态。
• 如果是存储简单的用户偏好，可直接用 cookie 或 localStorage。
• 如果是广告或分析，cookie 适合作为用户标识符。

你项目中有使用 Cookies 吗？遇到什么问题了吗？

┌─────────────────────────────────────────────────────────────────────────┐ │ OneKeyAccount (主容器) │ │ │ │ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │ │ │ 数据状态管理 │ │ 步骤控制逻辑 │ │ 表单数据处理 │ │ API交互逻辑 │ │ │ └─────────────┘ └─────────────┘ └─────────────┘ └─────────────┘ │ │ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ 组件树和数据流 │ │ │ │ │ │ │ │ ┌───────────────┐ │ │ │ │ │ StepProgress │◄───── currentStep │ │ │ │ └───────────────┘ │ │ │ │ │ │ │ │ ┌───────────────┐ │ │ │ │ │ SideMenu │◄───── activeMenu, menuItems │ │ │ │ └───────┬───────┘ │ │ │ │ │ │ │ │ │ │ │ │ menu-click │ │ │ │ │ ▼ │ │ │ │ │ ┌───────────────────────────────────┐ │ │ │ │ │ FormContainer │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────────────────────────┐ │ │ │ │ │ │ │ 动态表单组件 │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────┐ ┌─────────┐ │ │ │ │ │ │ │ │ │ProductForm│ │UnitForm │ │ │ │ │ │ │ │ │ └─────────┘ └─────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────┐ ┌─────────┐ │ │ │ │ │ │ │ │ │UnitListForm│ │AccountForm│ │ │ │ │ │ │ │ │ └─────────┘ └─────────┘ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ │ ┌─────────┐ │ │ │ │ │ │ │ │ │PasswordForm│ │ │ │ │ │ │ │ │ └─────────┘ │ │ │ │ │ │ │ └─────────────────────────────┘ │ │ │ │ │ └───────────────────────────────────┘ │ │ │ │ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ └─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐ │ 数据流向 │ │ │ │ 1. 父组件 → 子组件: │ │ - currentStep → StepProgress, FormContainer │ │ - activeMenu → SideMenu, FormContainer │ │ - formData → FormContainer → 动态表单组件 │ │ │ │ 2. 子组件 → 父组件: │ │ - menu-click → SideMenu → OneKeyAccount (更新 activeMenu) │ │ - form-change → 动态表单组件 → FormContainer → OneKeyAccount │ │ - prev-step/next-step → FormContainer → OneKeyAccount │ │ │ │ 3. API交互: │ │ - OneKeyAccount → API → 后端服务 │ │ - 表单提交/保存 → API → 后端服务 │ │ │ └─────────────────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────────────────┐ │ 状态管理 │ │ │ │ ┌─────────────────┐ │ │ │ OneKeyAccount │ │ │ │ (状态容器) │ │ │ └────────┬────────┘ │ │ │ │ │ ▼ │ │ ┌─────────────────────────────────────────────────────────────────┐ │ │ │ formData 对象 │ │ │ │ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ ┌─────────┐ │ │ │ │ │ product │ │ unit │ │ unitList│ │ account │ │password │ │ │ │ │ └─────────┘ └─────────┘ └─────────┘ └─────────┘ └─────────┘ │ │ │ └─────────────────────────────────────────────────────────────────┘ │ │ │ └─────────────────────────────────────────────────────────────────────────┘