前端本地存储方案对比：localStorage、sessionStorage 与 cookie

2. sessionStorage

API 和 localStorage 完全一致，唯一区别是生命周期：

sessionStorage.setItem('token', '临时令牌'); // 关闭页面立即消失

3. cookie（原生写法）

原生 API 比较繁琐，推荐封装或用库：

// 设置 cookie（带 7 天过期时间）
document.cookie = "username=张三; max-age=" + 60*60*24*7;

// 获取 cookie
const cookie = document.cookie;

// 删除 cookie（设置过期时间为过去）
document.cookie = "username=; max-age=0";

四、关键差异深度解析

1. 生命周期（最重要）

• localStorage：真正的持久化存储，重启浏览器、关机都不会丢。
• sessionStorage：临时存储，只要标签页一关，数据立刻清空。
• cookie：灵活可控，可设置 max-age/expires 定义过期时间。

2. 存储容量

• cookie：4KB —— 只能存少量文本（token、id）。
• storage：5MB —— 可存大量前端数据（缓存列表、用户配置）。

3. 网络通信（核心区别）

• cookie：每次请求都会自动带到服务端，浪费流量，影响性能。
• localStorage/sessionStorage：不参与通信，纯前端本地使用。

4. 安全性

• cookie：不配置 HttpOnly 时，JS 可读取，容易被 XSS 攻击；
• storage：不会自动发送到服务器，相对更安全，但仍需防范 XSS。

五、实际开发怎么选？（最佳实践）

✅ 使用 localStorage 的场景

• 长期保存用户偏好设置（主题、语言、列表布局）
• 前端缓存大量数据（商品列表、搜索历史）
• 不需要传给服务端的持久化状态

✅ 使用 sessionStorage 的场景

• 表单临时数据（防止刷新丢失，关闭页面自动清空）
• 单页应用路由状态、临时令牌
• 同一页面会话内的临时数据

✅ 使用 cookie 的场景

• 登录态、身份认证 Token（必须让服务端识别）
• 需要跨页面、跨浏览器持久化且传给后端的数据
• 服务端需要读取的客户端状态

六、避坑小贴士

1. 三者都只能存字符串，对象 / 数组必须用 JSON.stringify 存，JSON.parse 取。
2. cookie 别存大量数据，会严重影响请求性能。
3. sessionStorage 不跨标签页，打开新页面数据不共享。
4. localStorage 永久存储，敏感信息不要存（密码、密钥）。
5. 登录认证优先用 cookie + HttpOnly，安全性最高。

总结

• localStorage：持久化、大容量、纯本地存储，适合长期缓存
• sessionStorage：临时会话、大容量、页面关闭即清空，适合临时数据
• cookie：可过期、小容量、自动传服务端，适合登录认证

掌握这三种存储方案，你就能在前端开发中灵活处理数据持久化，写出更稳定、更高效的代码。