¿Cómo lo agrego a Localstorage para que no elimine la información registrada cuando voy y vuelvo a la página siguiente? código completo
const [firstName, setFirstName] = useState(""); const [lastname, setLastname] = useState(""); const [email, setEmail] = useState(""); const [phone, setPhone] = useState(""); <Box sx={{ ml: "140px", mb: "30px" }}> {multipleInput.map((item) => { return ( <Grid item sm={8}> <TextField sx={{ mt: "20px" }} autoComplete={item.autoComplete} fullWidth value={item.value} onChange={(e) => item.setValue(e.target.value)} label={item.label} InputLabelProps={{ style: { fontFamily: "Montserrat" } }} inputRef={item.inputRef} type={item.type} /> </Grid> ); })} </Box></Box> <Link href="TechSkill"> <Button> <NavigateNextIcon /> </Button> </Link>Si entiendo correctamente, desea guardar el valor de una variable en localStorage, y es bastante fácil de hacer.
Puede usar el gancho useEffect , que monitoreará la actualización de la variable y actualizará constantemente el localStorage.
Guardar se ve así:
// SAVING useEffect(() => { // storing input name localStorage.setItem("phone", JSON.stringify(phone)); }, [phone]);Entonces, cuando un usuario actualice el valor del teléfono variable, el valor en localStorage se actualizará automáticamente.
Para leer el valor de localStorage, haga lo siguiente:
// READING const [phone, setPhone] = useState(() => { // getting stored value const saved = localStorage.getItem("phone"); const initialValue = JSON.parse(saved); return initialValue || ""; });Pero para la respuesta exacta, no está claro qué es exactamente lo que quiere hacer, en general, la variante descrita anteriormente debería funcionar si la modifica.