0
187
VistasLos datos del formulario no se guardan en el almacenamiento local, excepto que actualizo el navegador
Estoy trabajando en un formulario. El objetivo es guardar los datos del formulario en localStorage y también completar los campos del formulario con los datos en localStorage.
Después de enviar el formulario, los datos no se guardan en localStorage, excepto que actualizo el navegador.
Incluso después de actualizar y ver los datos en localStorage, abro un nuevo navegador y ejecuto el formulario. Compruebo el almacenamiento local pero los datos no se muestran.
Agradeceré tu consejo.
Gracias
Después de enviar el formulario 
Después de recargar la página 
código HTML
<form action="https://formspree.io/f/xwkaygyj" method="POST"> <div class="name"> <input id="name" type="text" name="name" required placeholder="Name" oninput="onChangeHandler(this)"/> <input id="email" type="email" name="email" required placeholder="example@gmail.com" oninput="onChangeHandler(this)"/> <textarea id="message" name="message" cols="30" rows="7" maxlength="500" placeholder="Write your message here" required oninput="onChangeHandler(this)"> </textarea> <button type="submit">Send</button> </div> </form>Código JavaScript
const formName = document.getElementById('name'); const email = document.getElementById('email'); const message = document.getElementById('message'); let formData = { name: '', email: '', message: '' }; const onChangeHandler = (event) => { switch (event.name) { case 'name': formData = { ...formData, name: event.value }; break; case 'email': formData = { ...formData, email: event.value }; break; case 'message': formData = { ...formData, message: event.value }; break; default: break; } localStorage.setItem('data', JSON.stringify(formData)); }; const reloadBrowser = JSON.parse(localStorage.getItem('data')); if (reloadBrowser) { formName.value = reloadBrowser.name; email.value = reloadBrowser.email; message.value = reloadBrowser.message; }1 Respuestas
Responde la pregunta0
Creo que puede usar AJAX para enviar su solicitud al servidor de manera eficiente, esto es más limpio y menos propenso a errores en lugar de capturar manualmente los datos de entrada a través de la declaración swtich , además, se asegura de que los datos se envíen correctamente al servidor y una copia se almacena en el almacenamiento local también.
$.ajax({ type: 'POST', url: $("form").attr("action"), data: $("form").serialize(), //Or your custom data success: function(response) { localStorage.setItem('data', JSON.stringify(formData)); }, });