En algún momento te habrás topado con formulario que tienen varias etapas y por algún motivo debes recargar la pagina para seguir al siguiente paso y claro como aun no termina el registro no consideramos apropiado guardar aun esto a la base de datos y es algo engorroso estar creando una tabla temporal.
las soluciones pueden ser meterlo todo en una session en php o utilizando lo nuevo (OK no tan nuevo) de javascript LocalStorage.
Grabaremos en LocalStorage en tiempo real
para ellos la idea es simple usaremos una función nativa setInterval para guarde cada segundo lo que tengamos en los input’s.
como funciona?
Explico que hace el script y es algo simple usamos each para hacer un recorrido por todos los input , select y textarea (se puede agregar mas tipos) que tengamos en el DOM y capturamos el valor y lo metemos en variables localstorage que creamos con el nombre del elemento sea input , select o textarea y con su valor, esto sucedera cada segundo.
Volvemos hacer otro recorrido de lo de los elementos input , select o textarea para obtener los datos de los localstorage ya que para identificarlos necesitamos los nombres de estos elementos.
les dejo un ejemplo en funcionamiento:
El script
$(document).ready(function(){
$('input[type="text"],select,textarea').each(function(){
var name = $(this).attr('name');
value=localStorage.getItem(name);
var value = $(this).val(value);
})
setInterval(function(){
$('input[type="text"],select,textarea').each(function(){
var name = $(this).attr('name');
var value = $(this).val();
localStorage.setItem(name, value);
})
}, 1000);
})
