sessionstorage 可在报表系统中保存用户当次会话的临时查询条件,页面刷新或跳转后仍可读取,关闭标签页即清除;需统一管理存取时机与数据结构,使用固定 key(如"reportfiltercache"),存前 json.stringify()、读后 json.parse() 并加 try-catch,监听输入事件实时同步,仅在重置或切换报表时清除,避免手动遗漏或覆盖。

SessionStorage 可以在报表系统中保存用户当次会话的临时查询条件,页面刷新或跳转后仍可读取,但关闭标签页即清除。关键在于统一管理存取时机和数据结构,避免手动反复操作导致遗漏或覆盖。
初始化时从 SessionStorage 恢复条件
页面加载(如报表列表页)时,优先检查 SessionStorage 中是否存在已保存的查询条件,有则自动填充表单并触发查询。
- 使用固定 key(如
"reportFilterCache"),避免拼写不一致 - 存入前用
JSON.stringify(),读取后用JSON.parse(),并加 try-catch 防止解析失败 - 若缓存数据字段与当前表单字段不匹配(如新增/删减字段),应做兼容处理或清空旧缓存
表单变更时实时同步到 SessionStorage
不是等点击“查询”才保存,而是监听关键输入控件(如日期选择器、下拉框、搜索框)的 change 或 input 事件,动态更新缓存。
抓取并分析 OpenClaw JSONL 会话日志,重建并回填代理记忆文件。适用于:(1) 模型切换后记忆不完整,(2) 验证记忆覆盖度,(3) 重建丢失记忆,(4) 通过 cron/heartbeat 自动同步每日记忆。支持简单提取及基于 LLM 的叙事摘要,并自动清理敏感信息。
- 推荐节流处理高频输入(如搜索框),避免频繁写入
- 对 checkbox、多选下拉等复合值,统一转为数组或字符串格式再存储,保持结构可预测
- 清除某条件时,同步从缓存对象中 delete 对应字段,再重新存入
执行查询或导出时保留缓存不变
点击“查询”“导出Excel”“打印”等操作不应清空 SessionStorage——这些属于同一会话内的延续行为。
- 仅在用户主动点击“重置”或进入全新报表模块(如切换菜单项)时才清除对应缓存
- 多个报表共用同一页面时,可用报表 ID 区分缓存 key,例如
`reportFilter_${reportId}` - 避免在 ajax 请求回调里误删缓存,尤其异步失败时更要保留原条件供重试
跨页面跳转时有条件延续
若从报表列表页跳转到详情页再返回,需确保返回时仍能恢复查询条件。SessionStorage 默认同源标签页共享,但 SPA 路由跳转不影响其存在。
- Vue/React 项目中,在路由守卫或组件 mounted 时恢复条件,而非仅依赖首次加载
- 若跳转到外部页面(如审批系统),可通过 URL 参数临时透传核心条件,返回时再合并写入 SessionStorage
- 不建议用 localStorage 替代——它不会随标签页关闭自动清理,容易造成条件残留干扰下次使用
不复杂但容易忽略:SessionStorage 是字符串存储,别直接存 Date 对象或函数;每次写入前先读取现有内容合并更新,而不是粗暴覆盖整个对象。
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南










