列表页状态持久化
模型、渠道、令牌、日志这些列表页的搜索词、筛选条件、分组方式、折叠状态在页面之间切换后会保留。
一、存在哪里
sessionStorage(标签页级),不是 localStorage。
| 存储 | 生命周期 | 用在哪 |
|---|---|---|
sessionStorage | 当前标签页,关闭即清空 | 列表页状态、面板折叠 |
localStorage | 跨标签页、跨重启 | 外观与入口偏好、登录背景、引导完成标记 |
选 sessionStorage 的理由:列表筛选是一次会话内的临时意图。把它写进 localStorage 会让「昨天筛了失败请求」在今天打开页面时依然生效——那时操作员已经忘了自己筛过,看到的是一个空列表。
二、键的形状
| 键 | 内容 |
|---|---|
channels.<key> | 渠道列表的某个维度(筛选 / 分组 / 搜索) |
models.<key> | 模型列表的某个维度 |
models.changes | 模型变更面板的筛选 |
models.missingDismissed | 「缺失模型」提示是否已手动关掉 |
panel.<storageKey> | 某个面板的展开 / 折叠状态 |
<key> 让同一个页面上的多个维度各自独立——改筛选不会重置分组方式。
三、折叠状态跨导航保留
侧栏面板的折叠状态用同一个机制记住,所以「在模型页折起来的面板」跳到日志页再回来仍然是折着的。
四、读写的容错
读写都包在 try 里:
- Storage 不可用(隐私模式、配额满)→ 用默认值,页面照常工作;
- 内容损坏(JSON 解不开、字段类型不对)→ 用默认值,而不是把整个状态丢掉。
这条对本项目尤其重要:状态里混着用户可见的筛选条件,抛异常会让整个列表页白屏。
五、什么不持久化
| 项 | 原因 |
|---|---|
| 已选中的行 | 选中是瞬时意图,跨导航保留会导致误操作 |
| 表单里的编辑内容 | 关掉抽屉就该丢掉;跨导航保留会让「取消」变得不可信 |
| 分页页码 | 数据会变,回到一个不存在的页码比回到第一页更糟 |