Guardar datos del formulario en tiempo real (LocalStorage)

localstorage-feature
Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

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);                 
            })

ejemplo online.

Share on LinkedInShare on FacebookTweet about this on TwitterShare on Google+

Related posts:


Luis Rodriguez

Desarrollador web / webdeveloper / programador web / Front end / Back End. Mi nombre es Luis Rodriguez con experiencia de 7 años en negocios por internet y un apasionante del mundo de las tecnologias web. Twitter Facebook Google +

Comentarios