Buscar (Don't Edit)

lunes, 1 de julio de 2013

Almacenamiento de datos con 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.

¡O pruebalo aquí mismo!


Nombre
E-mail
Asunto
Mensaje


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

Hasta la próxima ¡Saludos! ;)

4 comentarios:

  1. Muy bien explicado, esta funcionalidad de html5 es útil cuando se utiliza phonegap para hacer apps moviles, para guardar datos en json por ejemplo que si recordar contraseña, etc. Saludos

    ResponderBorrar
  2. Esta excelente la ejemplificacion, del post.

    ResponderBorrar
  3. perdon por mi ignorancia pero donde monto la referencia de jquery por favor si pueden explicarme ya que soy nuevo en esto de la programacion web gracias

    ResponderBorrar