前端本地存储详解：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 适合需要传给服务端的状态（如登录），容量小、可设置过期。掌握这三种存储方案，你就能在前端开发中灵活处理数据持久化，写出更稳定、更高效的代码。