Saltar al contenido

¿Cómo recargar la página actual sin perder ningún dato del formulario?

Te sugerimos que revises esta solución en un ambiente controlado antes de enviarlo a producción, saludos.

Solución:

Puede usar varios mecanismos de almacenamiento local para almacenar estos datos en el navegador, como almacenamiento web, IndexedDB, WebSQL (obsoleto) y File API (obsoleto y solo disponible en Chrome) (y UserData con IE).

El más simple y más compatible es WebStorage, donde tiene almacenamiento persistente (localStorage) o basado en sesiones (sessionStorage) que está en la memoria hasta que cierre el navegador. Ambos comparten la misma API.

Por ejemplo, puede (simplificado) hacer algo como esto cuando la página está a punto de recargarse:

window.onbeforeunload = function() 
    localStorage.setItem("name", $('#inputName').val());
    localStorage.setItem("email", $('#inputEmail').val());
    localStorage.setItem("phone", $('#inputPhone').val());
    localStorage.setItem("subject", $('#inputSubject').val());
    localStorage.setItem("detail", $('#inputDetail').val());
    // ...

El almacenamiento web funciona sincrónicamente, por lo que este mayo Trabaja aquí. Opcionalmente, puede almacenar los datos para cada evento de desenfoque en los elementos donde se ingresan los datos.

Al cargar la página, puede verificar:

window.onload = function() 

    var name = localStorage.getItem("name");
    if (name !== null) $('#inputName').val("name");

    // ...

getItem devoluciones null si los datos no existen.

Usar sessionStorage en vez de localStorage si desea almacenar sólo temporal.

Modifiqué el código de K3N para que funcionara para mi propósito y agregué algunos comentarios para ayudar a otros a descubrir cómo funciona sessionStorage.


Encuentre esto en GitHub. Especialmente creado para ello.

https://gist.github.com/zaus/4717416

Si aceptas, tienes el poder dejar un ensayo acerca de qué le añadirías a este post.

¡Haz clic para puntuar esta entrada!
(Votos: 2 Promedio: 4)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *