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();