sessionstorage适合保存单次会话内的临时筛选条件,关闭标签页后自动清空,需用json.stringify()序列化对象后存储,读取时用json.parse()还原并加try-catch处理异常。

SessionStorage 适合保存单次会话内的临时筛选条件,页面关闭或标签页关闭后自动清空,无需手动清理,也不跨标签页共享。
保存筛选条件:转成字符串再存
SessionStorage 只支持字符串值,所以对象、数组等必须先用 JSON.stringify() 序列化:
- 比如用户选了“价格区间 100–500”、“分类 = 手机”、“排序 = 销售量”,可整理成一个对象:
const filters = { price: [100, 500], category: 'phone', sort: 'sales' }; - 保存时: sessionStorage.setItem('searchFilters', JSON.stringify(filters))
- 避免直接存函数、Date 对象、undefined 或循环引用对象,否则会报错或丢失数据
读取并还原筛选条件
从 SessionStorage 取出后需用 JSON.parse() 还原为对象,同时建议加错误处理:
- 写法示例:
const saved = sessionStorage.getItem('searchFilters');
const filters = saved ? JSON.parse(saved) : {}; - 如果字符串损坏(如手动修改过 Storage),JSON.parse() 会抛错,加 try-catch 更稳妥
- 还原后可直接用于表单回填或重新发起请求
更新或清除条件的常见操作
筛选条件常动态变化,注意及时同步到 SessionStorage:
- 每次用户调整筛选项(如点选分类、拖动价格滑块),都应重新保存整个对象,而不是局部更新
- 重置筛选时,调用 sessionStorage.removeItem('searchFilters') 或设为空对象再保存
- 不需要监听 storage 事件——因为 SessionStorage 不触发跨标签页的 storage 事件,仅当前标签页有效
和 localStorage 的关键区别
别误用:SessionStorage 不持久,关掉浏览器窗口就没了;localStorage 才长期保留。选哪个取决于业务逻辑:
- 搜索页 → 返回列表页 → 再进搜索页仍要保留筛选?用 localStorage
- 只是防止刷新丢条件,且不希望下次打开还带着上次的筛选?用 sessionStorage 正合适
- 多标签页各自独立操作筛选?SessionStorage 天然隔离,不用额外处理
Java免费学习笔记:立即使用
解锁 Java 大师之旅:从入门到精通的终极指南











