LocalStorage和SessionStorage的区别和应用
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();