Estoy haciendo este código de un ejemplo de blog como almacenamiento local con reaccionar. Pero no funciona en tiempo real después de actualizarlo. ¿Cómo puedo hacerlo en tiempo real? Creo que puede usar el gancho de efecto que solía resolverse, pero no puedo implementarlo, ¿alguien me ayuda con esta solución?
import './App.css'; import React, { useState,useEffect } from 'react'; function App() { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const handle = () => { localStorage.setItem('Name', name); localStorage.setItem('Password', pwd); }; const remove = () => { localStorage.removeItem('Name'); localStorage.removeItem('Password'); }; return ( <div className="App"> <h1>Name of the user:</h1> <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <h1>Password of the user:</h1> <input type="password" placeholder="Password" value={pwd} onChange={(e) => setPwd(e.target.value)} /> <div> <button onClick={handle}>Done</button> </div> {localStorage.getItem('Name') && ( <div> Name: <p>{localStorage.getItem('Name')}</p> </div> )} {localStorage.getItem('Password') && ( <div> Password: <p>{localStorage.getItem('Password')}</p> </div> )} <div> <button onClick={remove}>Remove</button> </div> </div> ); } export default App;Este código no tiene ningún problema, pero quiero trabajar en tiempo real cuando hago clic en Listo, se muestra en tiempo real, ¿cómo lo hago?
Puede usar useState para manejar el almacenamiento local en tiempo real.
Tenga en cuenta que la implementación a continuación es solo para demostración, ¡NO DEBE almacenar contraseñas en el almacenamiento local A TODO COSTO!
import './App.css'; import React, { useState,useEffect } from 'react'; function App() { const [name, setName] = useState(''); const [pwd, setPwd] = useState(''); const [storedName, setStoredName] = useState(localStorage.getItem('Name')); const [storedPassword, getStoredPassword] = useState(localStorage.getItem('Password')); const handle = () => { localStorage.setItem('Name', name); localStorage.setItem('Password', pwd); setStoredName(name); setStoredPassword(pwd); }; const remove = () => { localStorage.removeItem('Name'); localStorage.removeItem('Password'); setStoredName(''); setStoredPassword(''); }; return ( <div className="App"> <h1>Name of the user:</h1> <input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} /> <h1>Password of the user:</h1> <input type="password" placeholder="Password" value={pwd} onChange={(e) => setPwd(e.target.value)} /> <div> <button onClick={handle}>Done</button> </div> {storedName && ( <div> Name: <p>{localStorage.getItem('Name')}</p> </div> )} {storedPassword && ( <div> Password: <p>{localStorage.getItem('Password')}</p> </div> )} <div> <button onClick={remove}>Remove</button> </div> </div> ); } export default App;Si quieres entender por qué no debemos almacenar contraseñas en el almacenamiento local, puedes consultar este artículo
Almacenar algo confidencial como una contraseña en un archivo de almacenamiento local en realidad simplifica el proceso para un pirata informático, ya que no necesitará cargar la cookie en su propio navegador.
si quieres usar gancho
import React, { useState, useEffect } from "react"; export function useUserHook() { const [name, setName] = useState(""); const [password, setPassword] = useState(""); const [change, setChange] = useState(false); React.useEffect(() => { const loadSaved = async () => { setName(localStorage.getItem("Name")); setPassword(localStorage.getItem("Password")); }; loadSaved(); }, [name, password, change]); const saveData = async (name, password) => { setChange(!change); await localStorage.setItem("Name", name); await localStorage.setItem("Password", password); }; const removeData = async () => { setChange(!change); await localStorage.removeItem("Name"); await localStorage.removeItem("Password"); }; return { name, password, saveData, removeData }; }gancho de importación a App.js
import { useUserHook } from "./userHook";añadir algunos cambios en el código
import React, { useState, useEffect } from "react"; import { useUserHook } from "./userHook"; import "./styles.css"; const App = () => { const { name, password, saveData, removeData } = useUserHook(); const [nameState, setName] = useState(""); const [pwdState, setPwd] = useState(""); const handle = () => { console.log("do save"); saveData(nameState, pwdState); }; const remove = () => { console.log("do remove"); removeData(); }; return ( <div className="App"> <h1>Name of the user:</h1> <input placeholder="Name" value={nameState} onChange={(e) => setName(e.target.value)} /> <h1>Password of the user:</h1> <input type="password" placeholder="Password" value={pwdState} onChange={(e) => setPwd(e.target.value)} /> <div> <button onClick={handle}>Done</button> </div> {name && ( <div> Name: <p>{name}</p> </div> )} {password && ( <div> Password: <p>{password}</p> </div> )} <div> <button onClick={remove}>Remove</button> </div> </div> ); }; export default App;espero que te pueda ayudar