sessionStorage 适合保存多级联动筛选器的当前选中值、激活层级和加载状态，页面加载时优先读取还原，操作后等数据加载完成再实时写入，注意跨标签隔离、大小限制及 WebView 兼容性。
用 sessionStorage 保存多级联动筛选器的状态，核心是“每次用户操作后立即存，页面加载时优先从 sessionStorage 读取并还原”。它不依赖服务端，适合单页内临时保留（关闭标签页即清空），比 localStorage 更契合“本次会话”的筛选场景。
一、明确哪些状态需要保存
多级联动（如：省份 → 城市 → 区县）中，需保存的不是最终结果，而是每一级的**当前选中值**和**可选项范围**（后者常由上一级决定）。但注意：sessionStorage 只能存字符串，所以需序列化。
- 保存：各级下拉框的
value（如"shanghai"）、当前激活的层级（如第2级已展开）、是否已触发过联动（避免首次加载重复请求） - 不保存：原始全量数据（太大，应由 JS 模块或 API 缓存）、DOM 结构（冗余）
- 建议结构示例（存为 JSON 字符串）：
{"province":"zj","city":"hz","district":"xh","activeLevel":3,"loaded":true}
二、操作时实时写入 sessionStorage
在每个下拉框的 change 事件中，更新状态对象并存入。关键点：必须等联动数据加载完成后再保存，否则可能存入旧值。
PigX UI 前端开发
下载
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 监听第一级变化（如省份）→ 请求城市列表 → 城市列表渲染完成 → 更新状态对象 →
sessionStorage.setItem('filterState', JSON.stringify(newState)) - 第二级同理：选城市 → 请求区县 → 渲染完 → 再保存完整状态
- 若支持“清空筛选”，需同步清除
sessionStorage对应项，再重置 DOM
三、页面加载时自动还原
在页面初始化阶段（如 DOMContentLoaded 或 Vue/React 的 mounted 钩子），读取并应用状态：
立即学习“前端免费学习笔记（深入）”；
- 先读：
const saved = sessionStorage.getItem('filterState') - 解析：
const state = saved ? JSON.parse(saved) : null - 还原逻辑：
• 若有province，设第一级下拉值，并触发城市加载；
• 若还有city，等城市加载完成后再设第二级值，并触发区县加载；
• 最后设district值（需确保区县数据已就绪） - 加防错：检查
state字段是否存在、对应选项是否仍在options中，避免因数据变更导致还原失败
四、注意边界与兼容性细节
sessionStorage 是浏览器原生 API，现代浏览器均支持，但需留意以下实际问题：
- 大小限制约 5–10MB，但单个 key 不宜超 2KB（避免序列化开销）；复杂状态可只存 ID，数据由本地缓存管理
- 跨 tab 不共享 —— 这反而是优点：A 标签页筛选不影响 B 标签页，符合用户直觉
- 页面刷新保留，但导航到其他路径（如跳转详情页再返回）是否保留？取决于是否同源同路径 —— 若路由变化（如
/list?cat=1→/list），需在路由守卫中统一处理还原 - 移动端 WebView（如微信内置浏览器）部分版本对
sessionStorage支持不稳定，可加 try-catch 并降级为内存缓存
