Almacenamiento de datos HTML5+JQuery+localStorage

¡Vaya! Teníamos tiempo sin publicar algo sobre HTML5, más que nada porque no es algo con lo que el trabajo me permita tener mucho contacto, y en los pocos ratos libres que tengo... bueno, pongamoslo de esta manera, me encanta ser hombre de familia y pasar un buen rato con ella. Sin embargo, lo que nos toca hoy es adentrarnos nuevamente con HTML5 y una de sus múltiples y muy interesantes herramientas: localStorage.


Para mostrar el funcionamiento de localStorage haremos un simple formulario de contacto para el cuál almacenaremos los datos que haya tecleado el usuario. De ésta manera si la ventana se cerrara por error, los  datos quedarán almacenados para que, al volver abrir la ventana, el usuario no tenga que volver a introducirlos. 


Entonces lo primero es crear el formulario:




Si observan, a todos los campos de los cuales deseo conservar la información introducida(en éste caso, todos) les puse la etiqueta class="storage", ésto me servirá para referenciarlos en mi script.


Ahora en el script, lo primero que haremos será guardar los datos. Como queremos ir guardando lo que el usuario teclee, entonces lo haremos cada vez que se presione una tecla, esto será en el evento keyup del control.




Como pueden observar, localStorage usa un formato llave=valor para almacenar los datos, por eso tenemos:


localStorage[llave]=valor
localStorage[$(this).attr('name')] = $(this).val();

Nuestra llave en este caso es el control referenciado por su atributo name, y el valor es el dato tecleado por el usuario.


Con esto ya estamos guardando la información introducida por el usuario, ahora necesitamos una función para recuperar dicha información, para esto iteraremos en nuestro localStorage en busca de los valores a recuperar. En la función debajo, primero preguntamos si existe una llave con el nombre de nuestro control y si es así, obtenemos el valor de esa llave.



Con esto ya tenemos un formulario de contacto que almacena los datos introducidos por el usuario. Ahora solo para agregarle algo de funcionalidad, haremos que al dar click al botón se eliminen los datos almacenados en localStorage, para eso añadiremos otra función más para el evento onsubmit del formulario. El código script final quedaría de la siguiente manera:



NOTA IMPORTANTE: No se olviden de poner la referencia a JQuery.



Ahora solo tenemos que abrirlo en nuestro navegador y probar nuestro formulario de contacto con localStorage.




Si quieren pueden descargar el código completo desde aquí: MoztroDev - Formulario de Contacto con localStorage


Hasta la próxima ¡Saludos!
Almacenamiento de datos HTML5+JQuery+localStorage
20 Puntos Score: 6.7/10
Visitas: 1983 Favoritos: 21
Ver los usuarios que votaron...
5 Comentarios Almacenamiento de datos HTML5+JQuery+localStorage
Muy bien explicado, esta funcionalidad de html5 es ?
gracias, un gusto aportar
me parecio interezante, hice el codigo pero no me funciona el localStorage.clear() solo sale la alerta al presionar el boton
Checando gracias por compartir
Para dejar un comentario Registrate! o.. eres ya usuario? Accede!