【session、cookie、sessionStorage、localStorage 】

前言

有时候傻傻分不清session、cookie、sessionStorage、localStorage ，他们都是 Web 开发中用于存储数据的技术，但它们的存储位置、生命周期、用途有本质区别。以下是具体解析：

1. Cookie（浏览器端存储，小型文本数据）

Cookie 是浏览器存储在用户设备上的小型文本文件，由服务器通过 HTTP 响应头设置，或由前端通过 JS 创建，主要用于身份识别、状态保持。

核心特点：

• 存储位置：浏览器（客户端），每次请求自动携带到服务器（通过 HTTP 头）。
• 容量限制：约 4KB（每个域名下有限制，通常 50 个左右）。
• 生命周期
  • 可设置过期时间（expires 或 max-age），过期后自动删除。
  • 若不设置，默认随浏览器关闭而失效（会话级 Cookie）。
• 访问权限
  • 服务器端：通过 HTTP 头（Set-Cookie 写入，Cookie 读取）。
  • 客户端：JS 可通过 document.cookie 读写（若未设置 HttpOnly: true）。
• 跨域限制：受同源策略限制，仅同一域名（或父域名，需配置 domain）可访问。

典型用途：

• 存储 Session ID（配合 Session 机制实现登录状态）。
• 记录用户偏好（如语言、主题设置）。
• 跟踪用户行为（如广告投放）。

示例（前端操作）：

// 设置 Cookie（有效期1天）
document.cookie = "username=admin; max-age=86400; path=/";

// 读取 Cookie
console.log(document.cookie); // "username=admin"

2. Session（服务器端存储，用户会话状态）

Session 是服务器端的内存 / 存储对象，用于保存用户的会话状态（如登录信息、权限等），依赖 Cookie 传递标识（Session ID）。

核心特点：

• 存储位置：服务器（内存、数据库、Redis 等）。
• 容量限制：理论上无限制（取决于服务器存储）。
• 生命周期
  • 默认为会话级（用户关闭浏览器后，服务器一段时间后自动销毁，通常 30 分钟）。
  • 可手动设置过期时间。
• 工作流程
  1. 用户登录后，服务器创建 Session，生成唯一 Session ID。
  2. 服务器通过 Cookie 将 Session ID 发送给客户端。
  3. 后续请求中，客户端通过 Cookie 携带 Session ID，服务器据此找到对应的 Session。
• 访问权限：仅服务器端可直接访问（客户端无法读取 Session 内容，只能传递 Session ID）。

典型用途：

• 保存用户登录状态（如用户 ID、角色、权限）。
• 存储临时会话数据（如购物车未结算商品）。

示例（后端 Node.js）：

// Express 框架中使用 Session
const session = require('express-session');
app.use(session({
  secret: 'secret-key', // 加密密钥
  resave: false,
  saveUninitialized: true,
  cookie: { maxAge: 3600000 } // Session ID 的 Cookie 有效期1小时
}));

// 登录时存储用户信息到 Session
app.post('/login', (req, res) => {
  req.session.user = { id: 1, name: 'admin' }; // 服务器端存储
  res.send('登录成功');
});

// 验证 Session
app.get('/profile', (req, res) => {
  if (req.session.user) {
    res.send(`欢迎 ${req.session.user.name}`);
  } else {
    res.send('请先登录');
  }
});

3. localStorage（客户端持久化存储）

localStorage 是 HTML5 新增的客户端本地存储机制，用于持久化存储数据，不随会话结束而消失。

核心特点：

• 存储位置：浏览器（客户端），仅在本地生效，不会发送到服务器。
• 容量限制：约 5-10MB（远大于 Cookie）。
• 生命周期：永久有效，除非手动删除（通过 JS 或清除浏览器数据）。
• 访问权限：仅客户端 JS 可访问（localStorage 对象），服务器无法直接读取。
• 跨域限制：受同源策略限制，仅同一域名可访问。
• 存储类型：仅支持字符串，复杂数据需通过 JSON.stringify() 转换。

典型用途：

• 存储长期用户偏好（如主题设置、默认配置）。
• 缓存不敏感的静态数据（如地区列表、字典数据）。

示例：

// 存储数据
localStorage.setItem('userPreferences', JSON.stringify({ theme: 'dark' }));

// 读取数据
const prefs = JSON.parse(localStorage.getItem('userPreferences'));
console.log(prefs.theme); // "dark"

// 删除数据
localStorage.removeItem('userPreferences');

4. sessionStorage（客户端会话级存储）

sessionStorage 也是 HTML5 新增的客户端存储机制，与 localStorage 类似，但生命周期为当前会话。

核心特点：

• 存储位置：浏览器（客户端），不发送到服务器。
• 容量限制：约 5-10MB。
• 生命周期：仅在当前会话（标签页 / 窗口）有效，关闭标签页 / 窗口后自动删除。
• 访问权限：仅客户端 JS 可访问（sessionStorage 对象）。
• 跨域限制：受同源策略限制，且同一域名的不同标签页间不共享数据。
• 存储类型：仅支持字符串，需手动序列化复杂数据。

典型用途：

• 存储临时表单数据（如用户正在填写的表单，防止意外刷新丢失）。
• 存储会话级临时数据（如当前页面的状态参数）。

示例：

// 存储临时表单数据
sessionStorage.setItem('tempForm', JSON.stringify({ username: 'test' }));

// 读取数据
const formData = JSON.parse(sessionStorage.getItem('tempForm'));

四者对比表格

总结

• Cookie：用于客户端与服务器间传递小型数据（如 Session ID），容量小，自动发送到服务器。
• Session：服务器端存储用户会话状态，依赖 Cookie 传递 Session ID，安全性高。
• localStorage：客户端持久化存储大量数据，适合长期保存用户设置。
• sessionStorage：客户端临时存储，适合会话级临时数据，关闭页面即消失。

实际开发中需根据数据大小、生命周期、是否跨域、是否需要传递到服务器等需求选择合适的存储方式。