Reactjs 页面重新加载后保存复选框状态

我在重新加载页面后保存复选框状态时遇到问题。我现在已经将未选中的复选框保存到本地存储，但不知道下一步该怎么做。简单地说，当我取消选中某个复选框时，我希望它在我返回该页面时保持未选中状态。 下面是一段代码片段

导出默认值（）=>{
常量[isDefaultChecked，setDefaultChecked]=useState（true）；
const[isChecked，setChecked]=useState（）；
const[isColumn，setColumn]=useState（true）；
const[hiddenColumns，setHiddenColumns]=useState（[]）；
const[Checked，setIsChecked]=useState（[]）；
const onCheckboxChange=（键：字符串，值：布尔）=>{
console.log（键、值）；
如果（！值）
setHiddenColumns（（hiddenColumns）=>[…hiddenColumns，{label:key}]）；
else setHiddenColumns（hiddenColumns.filter（（x）=>x.label！==key））；
};
返回(
{
localStorage.setItem(
“隐藏列”，
stringify（hiddenColumns）
);
console.log（隐藏列）；
setDialogOpen（假）；
}}
onCloseClick={（）=>setDialogOpen（false）}
>
onCheckboxChange（“delieveryMethods”，value）}
/>
)

首先，我建议将其存储在会话存储中，除非您需要在新选项卡或窗口中打开后保持选中状态

要实现这一点，您只需在组件构建时从会话存储中读取值。试试这样的

() => {
  const [isChecked, setChecked] = useState(sessionStorage.getItem('isChecked') || false);
  const onCheckboxChange = (key: string, value: boolean) => {
    sessionStorage.setItem('isChecked', value)
    setChecked(value)
  };

  return (
   ...
   <Checkbox
     value={isChecked}
     label="Delivery Methods"
     onChange={(value) => onCheckboxChange("delieveryMethods", value)}
    />
  )
}

（）=>{
const[isChecked，setChecked]=useState（sessionStorage.getItem（'isChecked'）| | false）；
const onCheckboxChange=（键：字符串，值：布尔）=>{
sessionStorage.setItem（'isChecked'，值）
setChecked（值）
};
返回(
...
onCheckboxChange（“delieveryMethods”，value）}
/>
)
}