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

Question

我无法在页面重新加载后保存复选框状态。我暂时将未选中的复选框保存到 localStorage，但不知道下一步应该做什么。简单地说，当我取消选中一个复选框时，我希望它在我返回该页面时保持未选中状态。这是一个代码片段。

export default () => {
  const [isDefaultChecked, setDefaultChecked] = useState(true);
  const [isChecked, setChecked] = useState();
  const [isColumn, setColumn] = useState(true);
  const [hiddenColumns, setHiddenColumns] = useState([]);
  const [Checked, setIsChecked] = useState([]);
  
  const onCheckboxChange = (key: string, value: boolean) => {
    console.log(key, value);

    if (!value)
      setHiddenColumns((hiddenColumns) => [...hiddenColumns, { label: key }]);
    else setHiddenColumns(hiddenColumns.filter((x) => x.label !== key));
  };
 return(
 <Dialog
          isOpen={isDialogOpen}
          onOkClick={() => {
            localStorage.setItem(
              "hiddenColumns",
              JSON.stringify(hiddenColumns)
            );
            console.log(hiddenColumns);
            setDialogOpen(false);
          }}
          onCloseClick={() => setDialogOpen(false)}
        >
          <div>
            <Checkbox
              defaultChecked={isDefaultChecked}
              label="Delivery Methods"
              onChange={(value) => onCheckboxChange("delieveryMethods", value)}
            />
          </div>
 )

非常感谢！

Answer 1

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

要完成此操作，您只需在构建组件时从会话存储中读取值。尝试这样的事情...

() => {
  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)}
    />
  )
}

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

save Checkbox state after page reload

checkbox

typescript

reactjs