浏览器本地存储分层隔离设计

摘要

前端需要存储登录状态、筛选条件、页面配置、临时草稿多类本地数据，统一存入 localStorage 易出现 key 冲突、敏感数据暴露、过期数据堆积。本文区分 localStorage、sessionStorage 两套存储介质，分层划分存储用途，封装统一读写工具并设置自动过期清理，bidfans 前端本地存储统一使用该工具类。

一、无分层存储的问题

全部数据存入 localStorage，关闭页面数据不销毁，临时筛选、弹窗草稿长期留存，不同页面 key 重名覆盖数据；无过期机制，一年前的浏览记录持续占用浏览器存储空间；登录凭证、站点身份等敏感数据与普通草稿混存，清理缓存时容易误删登录状态；无统一封装，各页面读写存储代码不统一，维护难度高。

二、本地存储封装工具代码

复制代码

// 分层本地存储工具
const StorageUtil = {
  // 长期持久存储：登录、站点基础配置
  setLocal(key, value, expireMin = 0) {
    const data = { val: value, time: Date.now(), expire: expireMin * 60 * 1000 }
    window.localStorage.setItem(key, JSON.stringify(data))
  },
  // 页面临时存储，关闭标签自动销毁
  setSession(key, value) {
    window.sessionStorage.setItem(key, JSON.stringify(value))
  },
  // 读取并校验过期长期存储
  getLocal(key) {
    const str = window.localStorage.getItem(key)
    if(!str) return null
    const data = JSON.parse(str)
    if(data.expire && Date.now() - data.time > data.expire) {
      window.localStorage.removeItem(key)
      return null
    }
    return data.val
  }
}

业务分层规范：登录、站点配置、常用筛选存入带过期 localStorage；当前页面临时筛选、弹窗状态存入 sessionStorage，关闭页面自动清除。

三、过期自动清理策略

设置浏览页面时自动扫描长期存储过期 key，过期数据直接删除；用户退出登录时，一键清理所有非基础业务本地缓存，仅保留站点基础配置，不会清除必要登录信息。首页加载执行轻量清理逻辑，避免浏览器存储无限膨胀。不同业务存储 key 增加统一前缀区分，如 user_、filter_、draft_，杜绝重名覆盖，筛选草稿不会覆盖登录凭证。

四、安全边界管控

用户账号切换、清除缓存时，批量清理当前账号关联的所有本地存储，防止多账号共用浏览器数据混淆；敏感登录标识不存放明文，配合 token 存储规范，本地仅存储短期会话标识，降低信息泄露风险。移动端 H5 适配浏览器存储容量限制，单类数据存储上限做截断，避免存储溢出报错。 bidfans 使用分层存储工具后，前端本地数据错乱、缓存残留反馈大幅减少。

结语

分层隔离浏览器存储介质，搭配带过期机制的统一读写工具，规范不同类型前端本地数据存放规则，解决 key 冲突、垃圾数据堆积问题，适配多页面、多终端商品前端项目。