Блог

Главная - Вопросы по программированию - сохранение состояния флажка после перезагрузки страницы

сохранение состояния флажка после перезагрузки страницы

#reactjs #typescript #checkbox

#reactjs #typescript #флажок

Вопрос:

У меня проблемы с сохранением состояния флажка после перезагрузки страницы. На данный момент я сохранил свои непроверенные флажки в 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>
 )

Большое вам спасибо!

Ответ №1:

прежде всего, я бы рекомендовал сохранить это в хранилище сеансов, если вам не нужно, чтобы оно оставалось проверенным после открытия в новой вкладке или окне.

для этого вам просто нужно прочитать значение из хранилища сеанса при сборке компонента. попробуйте что-то вроде этого…

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