前端存储入门：Cookie 与用户登录状态管理

前言：为什么需要存储？ 想象一个网站：你登录后刷新页面，又变回未登录；把商品加入购物车，跳转页面后购物车空了。这种糟糕体验源于 HTTP 协议的无状态性 ------每次请求都被视为独立事件，服务器"记不住"你是谁。前端存储技术应运而生，而 Cookie 是解决身份认证问题的关键。

HTTP 的"健忘症"
- HTTP 0.9/1.0 设计之初是简单的文档传输协议。
- 每次请求独立，服务器处理完即"忘记"。请求一次和一千次，服务器都视作新访客。
- 问题： 如何实现登录、购物车等需要"记忆"的功能？
Cookie 的登场 (HTTP 1.0+)
- 解决方案： 在 HTTP 请求头(Cookie)和响应头(Set-Cookie)中携带小块文本信息。
- 工作流程：
  1. 首次请求： 浏览器请求服务器（无Cookie）。
  2. 服务器响应： 服务器验证成功（如登录），在响应头中添加 Set-Cookie: user_id=123; ...。
  3. 浏览器存储： 浏览器收到响应，将 Cookie 保存（位置、有效期等由服务器指定）。
  4. 后续请求： 浏览器自动在每个同源的 HTTP 请求头中加入 Cookie: user_id=123; ...。
  5. 服务器识别： 服务器读取请求头中的 Cookie，解析出 user_id=123，识别用户身份。
- 本质： HTTP 本身依然无状态！Cookie 通过在请求头中"夹带"身份信息，让服务器能关联请求，模拟出"状态"。

比喻：Cookie 就像会员卡

你首次光顾商店（请求服务器），办卡（Set-Cookie）。
卡由你保管（浏览器存储）。
下次购物（请求），出示会员卡（请求头带 Cookie）。
店员（服务器）刷卡识别身份，提供会员服务。

定义： Cookie 是浏览器存储的一小段文本数据（通常小于 4KB）。
核心作用： 在客户端（浏览器）保存会话或状态信息，主要用于身份识别。
典型存储内容：
- 登录状态： 用户唯一标识符（如 user_id, session_id）。
- 购物车信息： 商品 ID 列表（小型数据）。
- 用户偏好设置（如语言、主题）。
关键特性：
- 自动携带： 浏览器会在同源的请求中自动附加 Cookie。
- 域名绑定： Cookie 与特定域名关联，只发给该域名下的服务器。
- 可设置有效期： 会话 Cookie（浏览器关闭即删）或持久 Cookie（指定过期时间）。
- 大小和数量限制： 单个域名下 Cookie 的数量和总大小有限制（因浏览器而异）。
- 安全性考虑： 可设置 HttpOnly（禁止 JS 访问防 XSS）、Secure（仅 HTTPS 传输）、SameSite（控制跨站发送）。

让我们通过用户登录场景，看 Cookie 如何工作：

前端：登录表单提交

javascript 复制代码

// 1. 获取表单元素
const loginForm = document.getElementById('loginForm');

// 2. 监听提交事件
loginForm.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认表单提交刷新页面

    // 3. 收集用户名密码
    const username = document.getElementById('username').value;
    const password = document.getElementById('password').value;

    // 4. 发送登录请求到后端API
    try {
        const response = await fetch('/api/login', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ username, password })
        });

        // 5. 处理响应
        if (response.ok) {
            // 登录成功！Cookie 已由浏览器自动保存
            alert('登录成功！');
            // 通常跳转到首页或用户中心
            window.location.href = '/home';
        } else {
            // 处理登录失败（如显示错误信息）
            const errorData = await response.json();
            alert(`登录失败: ${errorData.message}`);
        }
    } catch (error) {
        console.error('请求出错:', error);
        alert('网络或服务器错误');
    }
});

关键点：fetch 发送 POST 请求到后端登录接口 /api/login。

后端：验证身份并设置 Cookie

javascript 复制代码

// 示例：Node.js/Express 后端
app.post('/api/login', async (req, res) => {
    const { username, password } = req.body;

    // 1. 数据库验证用户名密码 (伪代码)
    const user = await db.findUser(username);
    if (!user || !verifyPassword(password, user.hashedPassword)) {
        return res.status(401).json({ message: '用户名或密码错误' });
    }

    // 2. 验证通过，生成代表登录状态的 Token 或 Session ID
    const sessionToken = generateSecureToken(user.id); // 生成一个安全令牌

    // 3. 在响应头中设置 Cookie
    res.setHeader('Set-Cookie', [
        `session_id=${sessionToken}; HttpOnly; Secure; SameSite=Lax; Max-Age=${60 * 60 * 24 * 7}; Path=/` // 关键！
    ]);

    // 4. 发送成功响应 (不需要在响应体里传Token/Cookie)
    res.status(200).json({ message: '登录成功' });
});

核心步骤：Set-Cookie 响应头！
session_id=${sessionToken}: 键值对，存储身份令牌。
HttpOnly: 禁止 JavaScript 访问，增强安全性（防 XSS 窃取）。
Secure: 仅通过 HTTPS 传输 Cookie，防止中间人窃听。
SameSite=Lax/Strict: 控制跨站点请求是否发送 Cookie（防 CSRF）。
Max-Age/Expires: 设置 Cookie 有效期（此处 7 天）。
Path=/: Cookie 对网站根路径 / 及其子路径有效。

后续请求：自动携带 Cookie

浏览器保存了 session_id Cookie。
当用户访问 /home 或任何同源（相同协议、域名、端口）下的页面时：
- 浏览器自动在请求头中加入：Cookie: session_id=xxxxxx

后端接收到请求：

javascript 复制代码

app.get('/api/user/profile', (req, res) => {
    // 1. 从请求头中获取 Cookie
    const cookies = parseCookies(req.headers.cookie); // 需要解析
    const sessionToken = cookies.session_id;

    // 2. 根据 sessionToken 查找对应的用户会话数据 (伪代码)
    const userId = sessionStore.getUserId(sessionToken);
    if (!userId) {
        return res.status(401).json({ message: '未登录或会话过期' });
    }

    // 3. 根据 userId 查询用户信息
    const userProfile = await db.getUserProfile(userId);

    // 4. 返回用户信息给前端
    res.json(userProfile);
});

后端通过解析 Cookie 请求头中的 session_id，即可识别当前用户是谁，并返回个性化数据（如用户昵称、头像）。

特性	Cookie	localStorage	sessionStorage	IndexedDB
主要用途	身份认证、服务器交互	长期存储用户偏好、本地数据	临时会话数据（单标签页）	大型结构化数据、离线应用
生命周期	可设置有效期 (会话/持久)	永久存储 (除非手动清除)	标签页关闭即清除	永久存储 (除非手动清除)
存储大小	很小 (约 4KB/域名)	较大 (通常 5MB/域名)	较大 (通常 5MB/域名)	很大 (通常 >50MB/域名)
访问方式	每次 HTTP 请求自动携带 (同源)	仅通过 JavaScript API 读写	仅通过 JavaScript API 读写	仅通过 JavaScript API 读写
服务器访问	是 (通过请求头 `Cookie`)	否	否	否
JS 访问	可 (`document.cookie`)，但建议 `HttpOnly`	是 (`localStorage.getItem/setItem`)	是 (`sessionStorage...`)	是 (异步 API)
安全性	需谨慎配置 (`Secure`, `HttpOnly`, `SameSite`)	相对安全 (同源策略)	相对安全 (同源策略)	相对安全 (同源策略)

核心使命： 解决 HTTP 无状态问题，实现用户身份识别。它是 B/S 架构中维持会话状态的基础。
工作方式： 服务器通过 Set-Cookie 响应头"种"Cookie，浏览器存储并在后续同源请求的 Cookie 头中"带"上它。
前端职责：
- 正确提交登录/身份信息。
- 接收并存储服务器返回的 Cookie（浏览器自动完成）。
- 后续请求自动携带 Cookie（浏览器自动完成）。
后端职责：
- 验证身份信息。
- 关键！ 在登录成功响应中正确设置 Set-Cookie 头。
- 在需要身份验证的 API 中，解析请求头的 Cookie 以识别用户。
重要原则： 不要在 Cookie 中存储敏感信息（如明文密码）。应存储服务器生成的、难以伪造的令牌（如 Session ID）。务必使用 HttpOnly 和 Secure 标志增强安全性。

理解 Cookie 的工作原理，是前端开发中处理用户登录、权限管理、个性化服务等功能的基石。虽然 localStorage 等方案更适合存储纯客户端数据，但在需要与服务器通信并维持状态的关键场景下，Cookie 仍然是不可或缺的核心技术。

前端存储入门：Cookie 与用户登录状态管理

前端存储入门：Cookie 与用户登录状态管理

一、HTTP 的无状态性与 Cookie 的诞生

二、Cookie 是什么？

三、Cookie 实战：用户登录流程详解（前后端协作）

四、Cookie 与其他前端存储对比

五、总结：Cookie 的核心角色