当前位置：首页 > news >正文

LocalStorage和SessionStorage的区别和应用

news 2025/7/9 8:49:11

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