React中如何实现页面刷新后保持多个复选框的选中状态？

你现有代码存在两个问题：一是只适配了单个复选框的状态存储，二是状态初始 fallback 为空字符串，不符合复选框checked属性要求的布尔值类型，要支持多个复选框，调整方案如下：

调整后的完整代码 #

import { useEffect, useState } from "react";

const MultiCheckBox = () => {
  // 状态用对象存储，key为每个复选框的唯一name属性，value为对应选中状态
  const [checkedMap, setCheckedMap] = useState(() => {
    const saved = localStorage.getItem("checkedMap");
    const initialValue = JSON.parse(saved);
    // 本地无存储时返回所有复选框的默认未选中状态
    return initialValue || { option1: false, option2: false, option3: false };
  });

  // 状态变化时自动同步到localStorage
  useEffect(() => {
    localStorage.setItem("checkedMap", JSON.stringify(checkedMap));
  }, [checkedMap]);

  // 统一处理所有复选框的选中变更
  const handleCheckChange = (e) => {
    const { name, checked } = e.target;
    setCheckedMap(prev => ({
      ...prev,
      [name]: checked
    }));
  };

  return (
    <>
      <input
        type="checkbox"
        name="option1"
        checked={checkedMap.option1}
        onChange={handleCheckChange}
      />
      <label>选项1</label>

      <input
        type="checkbox"
        name="option2"
        checked={checkedMap.option2}
        onChange={handleCheckChange}
      />
      <label>选项2</label>

      <input
        type="checkbox"
        name="option3"
        checked={checkedMap.option3}
        onChange={handleCheckChange}
      />
      <label>选项3</label>
    </>
  );
};

核心修改点 #

• 用对象类型的checkedMap替代原来的单个布尔状态，每个复选框对应对象里的一个key，直接复用input的name属性作为key，不需要额外定义id
• 封装统一的change事件处理函数，通过事件对象拿到当前点击的复选框的name和最新选中状态，仅更新对应字段，不影响其他复选框的状态
• 存储和读取的localStorage内容对应调整为整个状态对象，刷新后可以直接还原所有复选框的选中状态
• 修正初始状态的fallback值为布尔类型的对象，符合复选框checked属性的类型要求

如果你的复选框是动态渲染的，只需要调整初始化的默认对象结构，循环渲染input时给每个元素绑定对应的name属性即可，逻辑不需要额外改动。

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