在前端开发中，数据本地存储是提升用户体验、优化性能、实现持久化状态的核心技术。我们最常用的就是 localStorage、sessionStorage 和 cookie 这三种方案，但很多开发者容易混淆它们的用法、存储特性和适用场景。
一、先搞懂核心概念
- cookie：最早的客户端存储方案，会随 HTTP 请求自动发送到服务器，主要用于身份验证、会话保持。
- localStorage：HTML5 新增的本地存储，持久化存储，手动清除才会消失，不参与网络请求。
- sessionStorage：HTML5 新增的会话存储，页面会话期间有效，关闭标签页 / 浏览器就清空。
二、核心区别一张表看懂
| 特性 | localStorage | sessionStorage | cookie |
|---|---|---|---|
| 生命周期 | 永久有效，手动清除 | 仅当前会话（关闭标签 / 浏览器失效） | 可设置过期时间，默认会话级 |
| 存储容量 | 约 5MB | 约 5MB | 很小，仅 4KB |
| 与服务端通信 | 不参与 | 不参与 | 自动携带在 HTTP 请求头中 |
| 访问权限 | 同源（协议 + 域名 + 端口）共享 | 同源 + 同一标签页 共享 | 同源共享 |
| API 易用性 | 简单，键值对 API | 简单，键值对 API | 原生 API 繁琐，需手动封装 |
| 安全性 | 较高，不发往服务器 | 较高，不发往服务器 | 需配置 HttpOnly/Secure 防攻击 |
| 数据类型 | 仅支持 字符串 | 仅支持 字符串 | 仅支持 字符串 |
一句话总结：存大量数据用 localStorage，临时会话用 sessionStorage，需要给服务器传的状态用 cookie。
三、基础用法速查（代码示例）
三者都是键值对存储，且只能存字符串，复杂对象需用 JSON 转换。
1. localStorage
// 存
localStorage.setItem('username', '张三');
localStorage.setItem('userInfo', JSON.stringify({ age: 20 }));
// 取
const name = localStorage.getItem('username');
const user = JSON.parse(localStorage.getItem('userInfo'));
// 删单个
localStorage.removeItem('username');
// 清空全部
localStorage.clear();
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（必须让服务端识别）
- 需要跨页面、跨浏览器持久化且传给后端的数据
- 服务端需要读取的客户端状态
六、避坑小贴士
- 三者都只能存字符串，对象 / 数组必须用
JSON.stringify存，JSON.parse取。 - cookie 别存大量数据，会严重影响请求性能。
- sessionStorage 不跨标签页，打开新页面数据不共享。
- localStorage 永久存储，敏感信息不要存（密码、密钥）。
- 登录认证优先用 cookie + HttpOnly，安全性最高。
总结
- localStorage：持久化、大容量、纯本地存储，适合长期本地缓存。
- sessionStorage：临时会话、大容量、页面关闭即清空，适合临时会话数据。
- cookie：可过期、小容量、自动传服务端、用于登录认证，适合需要传给服务端的状态。
掌握这三种存储方案，你就能在前端开发中灵活处理数据持久化，写出更稳定、更高效的代码。
