LocalStorage 和 SessionStorage 都是浏览器提供的 Web Storage API，常用于前端缓存数据，但它们在生命周期、作用范围、使用场景等方面有明显区别。
一、区别对比表
| 特性 | LocalStorage | SessionStorage |
|---|---|---|
| 生命周期 | 永久保存，除非手动删除 | 当前标签页会话，页面关闭即清除 |
| 存储大小 | 一般约 5~10MB | 一般约 5MB |
| 是否随请求发送 | ❌ 不会 | ❌ 不会 |
| 页面刷新后 | ✅ 数据还在 | ✅ 数据还在 |
| 新标签页打开 | ✅ 共享 | ❌ 不共享 |
| API 同步/异步 | 同步 API | 同步 API |
| 数据类型支持 | 仅支持字符串（需要手动转换为对象） | 仅支持字符串（需要手动转换为对象） |
二、应用场景分析
LocalStorage：适合需要持久保存的数据
适用场景：
登录 Token（如果非敏感）
用户偏好设置（如主题色、语言）
搜索历史记录、本地草稿
接口缓存数据（非敏感）
示例：
// 存储
localStorage.setItem('token', 'abc123');
localStorage.setItem('theme', 'dark');
// 获取
const token = localStorage.getItem('token');
// 删除
localStorage.removeItem('token');
SessionStorage：适合临时、当前会话用完就清的数据
- 适用场景：
多步表单中间数据
登录跳转回之前页面临时状态
某些不希望在新标签页共享的临时变量
- 示例：
// 存储
sessionStorage.setItem('step1Data', JSON.stringify({ name: '淇淇' }));
// 获取
const data = JSON.parse(sessionStorage.getItem('step1Data'));
// 清除
sessionStorage.clear();
三、结合实际建议
| 场景 | 推荐使用 | 原因 |
|---|---|---|
| 登录 token（前端存储时） | LocalStorage | 保留登录状态，刷新不丢失 |
| 表单临时数据（多步骤） | SessionStorage | 用户关闭页面即清理，防止数据过期 |
| 用户偏好（如语言、主题色） | LocalStorage | 长久生效，适合持久配置 |
| 接口缓存（短时间内复用） | Vuex + Local/SessionStorage | 根据数据重要性和时效性选择组合 |
| 敏感信息 | ❌建议不存储 | 建议放在 Cookie（HttpOnly）或只存在内存中 |
四、用LocalStorage封装一个带有效期的缓存方法
/**
* LocalStorage 带有效期缓存
* ttl 单位：毫秒
*/
const LSCache = {
/**
* 设置缓存
* @param {string} key 键名
* @param {*} value 任意可序列化的数据
* @param {number} ttl 有效期（毫秒），如 30 分钟 => 30 * 60 * 1000
*/
set(key, value, ttl) {
const expire = Date.now() + ttl;
const record = { value, expire };
localStorage.setItem(key, JSON.stringify(record));
},
/**
* 读取缓存（自动判断是否过期）
* @param {string} key
* @return {*} 数据或 null（不存在 / 已过期）
*/
get(key) {
const str = localStorage.getItem(key);
if (!str) return null;
try {
const { value, expire } = JSON.parse(str);
if (expire === 0 || expire >= Date.now()) {
return value;
}
// 过期自动清理
localStorage.removeItem(key);
} catch (_) {
// 数据被篡改或非 JSON，直接删除
localStorage.removeItem(key);
}
return null;
},
/** 手动删除 */
remove(key) {
localStorage.removeItem(key);
},
/** 扫描所有 key，清理过期数据（可在 App 启动或定时调用） */
clearExpired() {
Object.keys(localStorage).forEach(k => this.get(k));
}
};
使用范例
// 存 30 分钟
LSCache.set('token', 'abc123', 30 * 60 * 1000);
// 读取
const token = LSCache.get('token');
if (token) {
console.log('token 未过期：', token);
}
// 手动删除
LSCache.remove('token');
// 启动时批量清理过期
LSCache.clearExpired();