Estoy trabajando en un formulario en nextjs y me encantaría que los datos siguieran siendo los mismos, es decir, persistieran después de que toda la página se haya actualizado o recargado. El almacenamiento local no funciona con el siguiente js, por lo que estoy buscando una alternativa, siempre obtengo almacenamiento local no definido cuando lo uso Aquí está mi código a continuación
import React, { useState, useEffect, useLayoutEffect, createContext , useContext } from "react"; import { useRouter } from "next/router"; import Cookie from "js-cookie"; import { parseCookies } from "../helpers/index"; import { Formik } from "formik"; function Form() { return ( <div> <form action="" > <section class="left"> <div class="input-container"> <label for="name">Full name</label> <input type="text"/> </div> <div class="input-container"> <label for="age" required> Mobile Number </label> <input type="text"/> </div> <div class="input-container"> <label for="phone">Choose password</label> <input type="text"/> </div> </div> </section> </form> </div> ); } export default Form;Con formik fuera de discusión, para permitir que los datos persistan después de la actualización, debe guardarlos en localStorage (o cookies).
Esto funciona para NextJS (primero debe probar la window )
Ejemplo de la siguiente manera
const App = () => { const [ value, setValue ] = useState({ name: '', mobile: '' }); useEffect(() => { //you need to call this for nextjs, so this is performed only on client side. if (typeof window !== 'undefined') { let storedValue = localStorage.getItem('value'); if (storedValue) { storedValue = JSON.parse(storedValue) || {} // we explicitly get name and mobile value in case localStorage was manually modified. const name = storedValue.name || '' const mobile = storedValue.mobile || '' setValue({ name, mobile }) //restore value from localStorage } } },[]) // alternatively a betterway to handle side effect is useEffect // useEffect(() => { // localStorage.setItem('value', JSON.stringify(value)) // },[value]) const onChange = (e) => { const name = e.target.name const newValue = { ...value, [name]: e.target.value } setValue(newValue); localStorage.setItem('value', JSON.stringify(newValue)) //save input to localstorage } return (<div> <input name="name" value={value.name} onChange={onChange} /> <input name="mobile" value={value.mobile} onChange={onChange} /> </div> ) } }