LocalStorage和SessionStorage的区别和应用

发布于:2025-07-10 ⋅ 阅读:(19) ⋅ 点赞:(0)

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


网站公告

今日签到

点亮在社区的每一天
去签到