Cómo escribir una cookie que guarde los valores de entrada cuando el usuario envía el formulario... Y cuando el formulario se envía de nuevo, actualice la cookie sin eliminar los valores guardados previamente
export default function setcookie() { const [ name, setName ] = useState(''); const [ email, setEmail ] = useState(''); const [ mobile, setMobile ] = useState(''); const cookie = () => { localStorage.setItem("Names", name); localStorage.setItem("Emails", email); localStorage.setItem("Mobiles", mobile); } const Data = () => { const names = localStorage.getItem("Names"); const emails = localStorage.getItem("Emails"); const mobiles = localStorage.getItem("Mobiles"); return names + emails + mobiles; } return ( <div> <div className='page-wrapper d-inline-block'> <TextField id="standard_name" onChange={(e) => setName(e.target.value)} value={name} type="text" name="name" dir='rtl' label="FullName" variant="standard" /> <TextField id="standard_email"onChange={(e) => setEmail(e.target.value)} value={email} type="text" name="email" dir='rtl' label="Email" variant="standard" /> <TextField id="standard_number"onChange={(e) => setMobile(e.target.value)} value={mobile} type="number" name="mobile" dir='rtl' label="Phone Number" variant="standard" /> <TextField id="standard-message" type="text" name="message" dir='rtl' label="Message" variant="standard" /> <All.Button variant='outlined' name="btn" onClick={cookie}>sa</All.Button> </div> <Data /> </div> ); }puede usar una matriz para almacenar la fecha y mostrar datos de localStorage o cookie
export default function setcookie() { const [ name, setName ] = useState(''); const [ email, setEmail ] = useState(''); const [ mobile, setMobile ] = useState(''); const cookie = () => { let data = { Names: name, Emails:email, Mobiles:mobile } let Datas = localStorage.getItem("Datas") ? localStorage.getItem("Datas") : [] Datas.push(data) localStorage.setItem("Datas", Datas); } const Data = () => { const Datas= localStorage.getItem("Datas"); if (Datas){ let data = Datas[Datas.length - 1] return data.name + data.emails + data.mobiles; } return ''; } return ( <div> <div className='page-wrapper d-inline-block'> <TextField id="standard_name" onChange={(e) => setName(e.target.value)} value={name} type="text" name="name" dir='rtl' label="FullName" variant="standard" /> <TextField id="standard_email"onChange={(e) => setEmail(e.target.value)} value={email} type="text" name="email" dir='rtl' label="Email" variant="standard" /> <TextField id="standard_number"onChange={(e) => setMobile(e.target.value)} value={mobile} type="number" name="mobile" dir='rtl' label="Phone Number" variant="standard" /> <TextField id="standard-message" type="text" name="message" dir='rtl' label="Message" variant="standard" /> <All.Button variant='outlined' name="btn" onClick={cookie}>sa</All.Button> </div> <Data /> </div> ); }¿Supongo que los Names , los Emails y los Mobiles se almacenan como matrices?
localStorage solo admite cadenas. Pero puede convertir matrices en cadenas JSON con JSON.stringify()
const handleFormSubmit = () => { // validate form data or whatever... saveInputsToLocalStorage() } const saveInputsToLocalStorage = () => { const prevSavedInputs = loadInputsFromLocalStorage() for (const input in prevSavedInputs) { let inputArray = prevSavedInputs[input] || [] let value switch (input) { case 'Names': value = name break case 'Emails': value = email break case 'Mobiles': value = mobile break } localStorage.setItem(input, JSON.stringify([...inputArray, value])) } } const loadInputsFromLocalStorage = () => { const names = localStorage.getItem('Names') const emails = localStorage.getItem('Emails') const mobiles = localStorage.getItem('Mobiles') return { Names: names ? JSON.parse(names) : null, Emails: emails ? JSON.parse(emails) : null, Mobiles: mobiles ? JSON.parse(mobiles) : null } }