¡Hola! Me parece que andas usando un bloqueador de anuncios =( ¿Nos desbloqueas? ¿Por qué?
F13

Funcion 13

localStorage en formularios con HTML5 y jQuery

Hace tiempo, cuando empecé BuSeViCi, estuve buscando varias formas de conseguir la característica de “favoritos”. Personalmente es de la que más orgulloso me siento. Quizá lo sepáis o quizá no pero esta característica hace uso de localStorage, una de las características de HTML5.

Podríamos definir localStorage como un método para almacenar datos de manera interna, como las cookies, pero permite almacenar más datos y es generalmente algo más seguro que éstas. Los valores se almacenan a modo de clave -> valor.

El soporte para localStorage es bastante extendido y, por suerte, podemos contar con esta característica desde Internet Explorer 8, el resto de navegadores la soportan sin mayor problema.

En este artículo vamos a ver como podemos mejorar un formulario con localStorage de modo que si, por los azares del destino, se cierra el navegador o la pestaña, se puedan recuperar los datos que había en el campo.

Primero vamos a crear un sencillo formulario de contacto:

<form id="formulario" method="post" action="">  
  <fieldset>
    <label for="nombre">Nombre</label>
    <input type="text" name="nombre" id="nombre" class="localStorage" placeholder="Tu nombre" required/>
    <label for="correo">Email</label>
    <input type="email" name="correo" id="correo" class="localStorage" placeholder="Tu correo" required/>
    <label for="comentario">Comentario</label>
    <textarea id="comentario" name="comentario" class="localStorage"></textarea>
    <input type="submit" value="Enviar" /> </fieldset>
</form>  

Fíjate en que en cada campo he añadido la clase localStorage. Puedes usar la clase que quieras pero la usaremos posteriormente para seleccionar los campos del formulario.

Lo primero que haremos es almacenar todos los campos en una variable y, cuando alguno de ellos cambie, los guardaremos en localStorage:

almacenables.on('keyup', function(){  
  // Guardamos los valores 
  localStorage[$(this).attr('name')] = $(this).val(); 
});

Esta función está pendiente del evento keyup que ocurre cada vez que pulsamos una tecla. Es posible usar cualquier evento como change o blur para que sea menos agresivo.

Ahora que los valores se están guardando, vamos a crear la parte en la que obtenemos los valores de localStorage en caso de catástrofe:

almacenables.each(function() {  
  // Recuperamos los valores 
  if (localStorage[$(this).attr('name')]) {
    $(this).val(localStorage[$(this).attr('name')]);
  }
});

Para cada valor “almacenable”, revisamos si tenemos una copia en localStorage y, de ser así, cambiamos el valor (vacío) del campo por el que tenemos almacenado.

El código completo incluye una función que comprueba que localStorage esté disponible en el navegador, y limpia todos los datos de localStorage una vez se haya enviado el formulario:

(function($) {
  if (hayLocalStorage()) {
    var almacenables = $('.localStorage'),
      formulario = $('form#formulario');
    almacenables.each(function() { 
      // Recuperamos los valores 
      if (localStorage[$(this).attr('name')]) {
        $(this).val(localStorage[$(this).attr('name')]);
      }
    });
    almacenables.on('keyup', function() { 
      // Guardamos los valores 
      localStorage[$(this).attr('name')] = $(this).val();
    });
    formulario.on('submit', function(e) {
      e.preventDefault();
      localStorage.clear();
      alert('Ya hemos recibido los datos, hemos borrado localStorage!');
    });
  }

  function hayLocalStorage() {
    try {
      return 'localStorage' in window && window['localStorage'] !== null;
    } catch (e) {
      return false;
    }
  }
})(jQuery);

Una vez que hayas terminado, prueba a completar el formulario, cerrar el navegador, volver y verás como tus datos siguen ahí (también puedes refrescar la página).

Puedes ver el ejemplo en acción en una demo:

Este ejemplo es realmente básico y los usos para localStorage son realmente interesantes. Teniendo en cuenta el buen soporte que tienen los navegadores, es posible usarla sin demasiado miedo aunque dado que es una especificación que puede cambiar en el futuro, es recomendable que el 100% de la funcionalidad de una aplicación, no recaiga sobre esto.

Si el artículo te pareció interesante, útil o incluso equivocado, por favor considera el dejar un comentario. ¡Lo apreciaré mucho!

Programador Front-end en First + Third y Potato. Trabajando con JavaScript y HTML5 desde el corazón de Sevilla.

Comentarios ¡Únete a la conversación!