如何使用sessionStorage保存选中筛选值实现页面刷新后状态保留

两个存储API的适用场景明确，直接按业务需求选即可：

• 若仅需要当前标签页刷新时保留筛选值，关闭标签页后下次进入重置为默认值，选sessionStorage即可，完全匹配你的初始选型
• 若需要用户关闭浏览器/标签页后，下次重新进入页面仍保留上次选择的筛选值，再选用localStorage
  绝大多数后台系统的筛选场景，都是仅当前会话刷新保留即可，优先选sessionStorage。

你当前的代码有3个核心问题导致存储不生效：

1. 只做了存值操作，没有在组件初始化时读取存储值给state赋值，刷新后state永远走默认值AssignedFilterTypes.All
2. 把sessionStorage.setItem直接写在数据计算逻辑里，每次重算都会重复执行存值，且setItem本身无返回值，赋值给storedFilter的操作完全无效
3. 没有做存储值的类型校验，一旦存储值被篡改/版本迭代枚举值变化，会直接导致筛选逻辑异常

修正后的完整逻辑如下：

// 初始化筛选值时优先读取存储内容，兜底返回默认值
const getInitialFilter = (): AssignedFilterTypes => {
  const storedVal = sessionStorage.getItem('storedFilter');
  // 校验存储值是否属于合法的筛选枚举，避免异常值
  if (storedVal && Object.values(AssignedFilterTypes).includes(storedVal as AssignedFilterTypes)) {
    return storedVal as AssignedFilterTypes;
  }
  return AssignedFilterTypes.All;
};

const [filter, setFilter] = React.useState<AssignedFilterTypes>(getInitialFilter);

// 仅在筛选值变化时同步更新存储，不要放在计算逻辑里重复执行
React.useEffect(() => {
  sessionStorage.setItem('storedFilter', filter);
}, [filter]);

// 筛选计算逻辑（你原来的代码应该是包裹在useMemo中）
const filteredResult = React.useMemo(() => {
  const res = content
    .filter(c => c.percentage !== 100)
    .sort((a, b) => compare(a, b, sort));

  if (statistics && filter !== AssignedFilterTypes.All) {
    return res.filter(c => statistics[c.id].num_users);
  }

  return res;
// 记得补全回调中用到的所有依赖，避免闭包拿到旧值
}, [sort, showContent, filter, courses, programs, packages, statistics, content, compare]);

如果后续需要切换为持久化到跨标签/跨关闭的存储，只需要把代码中所有sessionStorage替换为localStorage即可，其余逻辑无需调整。

内容的提问来源于stack exchange，提问作者agobago