JavaScript 中 SessionStorage 怎么保存用户的临时筛选项-js教程-PHP中文网

sessionstorage适合保存页面会话期间的临时筛选项，如搜索关键词、分类选择等，关闭标签页后自动清空；需用json.stringify()存对象、json.parse()读取，并注意跨协议/域名隔离及5mb容量限制。

javascript 中 sessionstorage 怎么保存用户的临时筛选项

SessionStorage 适合保存页面会话期间的临时筛选项，比如搜索关键词、分类选择、排序方式等，关闭标签页后自动清空，无需手动清理。

保存筛选项：用 setItem 存对象字符串

SessionStorage 只支持字符串值，所以要把筛选对象转成 JSON 字符串再存：

示例：保存商品列表的筛选条件

Java Maven Common

Java Maven 项目审查工作流的通用输入处理。当 Java Maven 项目以 ZIP压缩包或 GitLab 仓库 URL 形式提供且需要...时使用。

下载

const filters = {
  category: 'electronics',
  priceRange: [0, 5000],
  sortBy: 'price-asc',
  keyword: 'wireless'
};

sessionStorage.setItem('listFilters', JSON.stringify(filters));

读取筛选项：用 getItem + JSON.parse 恢复对象

从 sessionStorage 读出来的是字符串，必须用 JSON.parse 转回对象，同时建议加异常处理防止解析失败：

function getFilters() {
  const saved = sessionStorage.getItem('listFilters');
  if (!saved) return {};
  try {
    return JSON.parse(saved);
  } catch (e) {
    console.warn('解析筛选项失败，返回空对象');
    return {};
  }
}

const currentFilters = getFilters(); // { category: 'electronics', ... }

更新或清除时直接操作，不用先读再写

修改某一项不需要先读整个对象——可以读、改、再存；也可以封装一个 update 方法：

只改一个字段（如切换排序）：sessionStorage.setItem('listFilters', JSON.stringify({...getFilters(), sortBy: 'date-desc'}));
清空筛选项：sessionStorage.removeItem('listFilters'); 或 sessionStorage.clear();（慎用，会清空所有）
页面加载时自动恢复筛选项并应用到 UI（如 select 下拉框、输入框、checkbox），可配合 Vue/React 的响应式更新，或原生 DOM 操作