页面加载后复选框值被重置，如何保留用户会话选择状态？

核心逻辑 #

优先拿localStorage里用户之前选过的状态当初始值，只有本地没存的时候，才用API传的props生成全未选中的默认状态。同时改convertToObject函数，让它能保留已有的选择，别一加载就全给重置成false。

具体改法 #

1. 从localStorage读初始状态 #

在Filter组件初始化状态的时候，先去localStorage里捞之前存的筛选状态，捞不到再用API的props生成默认值：

// 假设你的筛选状态存在filterState里
const [filterState, setFilterState] = useState(() => {
  const savedFilters = localStorage.getItem('table_filters'); // 用个唯一的键名，避免和其他功能冲突
  if (savedFilters) {
    return JSON.parse(savedFilters);
  }
  // 本地没数据的话，才用原来的逻辑生成全false的对象
  return convertToObject(props.filterOptions);
});

2. 改convertToObject，别强制重置 #

原来的convertToObject应该是把选项数组转成每个值都是false的对象，现在改成：如果有已有的状态，就合并进去，新选项才设为false：

const convertToObject = (options, existingState = {}) => {
  return options.reduce((acc, option) => {
    // 有之前选过的状态就用，没有才默认false
    acc[option.value] = existingState[option.value] ?? false;
    return acc;
  }, {});
};

这样就算API返回的筛选选项变了，用户之前选的也不会丢，新增的选项默认不选。

3. 状态变了就存到localStorage #

每次用户改复选框，把最新状态存到localStorage里：

useEffect(() => {
  localStorage.setItem('table_filters', JSON.stringify(filterState));
}, [filterState]);

4. 弹窗打开时同步状态（可选） #

如果弹窗是单独的组件，打开的时候再读一遍localStorage，防止其他页面改了状态不同步：

// 弹窗打开时触发
useEffect(() => {
  if (isModalVisible) {
    const savedFilters = localStorage.getItem('table_filters');
    if (savedFilters) {
      setFilterState(JSON.parse(savedFilters));
    }
  }
}, [isModalVisible]);

5. 干掉原来的重置逻辑 #

把之前那个一加载就把所有复选框设为false的useEffect改了，改成只有API返回的筛选选项变了的时候，用修改后的convertToObject合并状态，别全量重置：

useEffect(() => {
  // 当API的筛选选项更新时，合并已有状态
  setFilterState(prevState => convertToObject(props.filterOptions, prevState));
}, [props.filterOptions]);

注意事项 #

• localStorage的键名要唯一，比如用table_filters_xxx加上业务标识，别和其他功能撞了
• 如果筛选选项是动态变化的，上面的合并逻辑能保证用户的选择不丢失
• localStorage只能存字符串，所以必须用JSON.stringify和JSON.parse转一下对象

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