Estoy tratando de guardar el valor de las casillas de verificación en el almacenamiento local, de modo que cuando el usuario vuelva a cargar la página, permanezcan marcadas/sin marcar. Tengo un estado "isChecked" y una función handleOnChange.

Lo que intento hacer es almacenar el valor en el estado, y cada vez que se ejecuta la función onChange, configuro la tecla 'casilla de verificación' en el almacenamiento local con el valor de la casilla de verificación.

así es como se ve mi componente

 import React from "react"; import { useState, useEffect } from "react"; const Pdf = (props) => { const [shown, setShown] = useState(false); const [isChecked, setIsChecked] = useState(localStorage.getItem('checkbox') === 'true'); const handleOnChange = (e) => { setIsChecked(localStorage.getItem('checkbox')); localStorage.setItem('checkbox',`${e.target.checked}`) } const toggle = () => { setShown((prevState) => !prevState); alert(isChecked) }; return ( <div className="pdfContainer row container justify-content-center"> <section className="justify-content-center"> <h1 className="row justify-content-center h1--style"> Κεφάλαιο {props.id} </h1> <p className="row justify-content-center p--style">{props.info}</p> </section> <button onClick={toggle} className=" shadow button--style"> Μάθημα {props.id} </button> {shown && <embed className=" pdf" src={props.pdf} />} <div className="pdfChecked input-group-text input-group "> <input type="checkbox" id='pdfchecked' name="pdfChecked" value='1' checked={isChecked} onChange={handleOnChange} /> <label className="input--label"> Διάβασα το κεφάλαιο!</label> </div> </div> ); }; export default Pdf;

Entiendo que esto tiene muchos errores y no es como se supone que debes hacerlo. Encontré el concepto de almacenamiento local difícil de comprender como principiante, y he intentado muchas formas de hacer que esto funcione. A partir de ahora, funciona un poco , lo que significa que cuando vuelvo a cargar la página permanece igual, ¡pero tengo que hacer clic en la casilla de verificación varias veces! TAN buggy. ¡Cualquier ayuda, especialmente dejarme saber por qué mi proceso de pensamiento es incorrecto, sería apreciada!