Tengo un problema con localstorage.getItem, la función setItem funciona bien y los datos se almacenan correctamente, pero cuando actualizo la página, los datos desaparecen. aqui estan mis codigos
useEffect(()=>{ localStorage.setItem(local_Storage_key, JSON.stringify(contacts)); }, [contacts]); useEffect(()=>{ const storage = JSON.parse(localStorage.getItem(local_Storage_key)); if (storage) {setContacts(storage);} }, []);imagen del almacenamiento local antes de actualizar la página
Creo que eso se debe a que su código a continuación se ejecuta después de que se haya montado el componente.
useEffect(()=>{ localStorage.setItem(local_Storage_key, JSON.stringify(contacts)); }, [contacts]);Y debido a esto, está configurando nuevamente el valor inicial de los contactos en localStorage. Para evitar esto, puede establecer el valor inicial de los contactos en el valor que obtiene del localStorage
const [contacts,setContacts] = useState(JSON.parse(localStorage.getItem(local_Storage_key))); useEffect(()=>{ localStorage.setItem(local_Storage_key, JSON.stringify(contacts)); }, [contacts]); // remove another useEffectTe sugiero que uses useLocalStorage
import { useLocalStorage } from 'react-use'; const Demo = () => { const [value, setValue, remove] = useLocalStorage('my-key', 'foo'); return ( <div> <div>Value: {value}</div> <button onClick={() => setValue('bar')}>bar</button> <button onClick={() => setValue('baz')}>baz</button> <button onClick={() => remove()}>Remove</button> </div> ); };