Usando HTML5 localStorage en un formulario

Pequeño resumen del artículo  de Thomas Hardy (artículo original) donde explica cómo guardar datos localmente con HTML5.

html5-logoLocalStorage de HTML5 nos proporciona la posibilidad de almacenar datos del tipo clave/valor dentro del navegador del usuario, lo que quiere decir que la información estará allí almacenada aunque el usuario cierre el navegador, borre las cookies o apague el dispositivo.

LocalStorage está soportado por la mayoría de los navegadores modernos: Firefox 3.5+, Chrome 4+, Safari 4+, Mobile Safari, Android 2+ e Internet Explorer 8+.

En el ejemplo siguiente vamos a crear un simple formulario donde se almacenarán los datos localmente para que, si el formulario no se llega a enviar, los datos permanezcan almacenados y puedan recuperarse cuando el usuario regrese de nuevo a la página.


Primero se necesita un formulario para el usuario, a continuación el código HTML:

<form id="localStorageTest" method="post" action="">
<label>Name:</label>
<input type="text" name="name" id="name" class="stored" value="" />
<label>Email:</label>
<input type="email" name="email" id="email" class="stored" value="" />
<label>Message:</label>
<textarea name="message" id="message" class="stored"></textarea>
<input type="submit" class="demo-button" value="Submit" />
</form>

Lo primero a destacar es que los elementos del formulario están bajo una clase llamada “stored”. Esto nos servirá para especificar qué campos del formulario queremos que se almacenen o cuales no.

A continuación el código Query:

<script type="text/javascript">
$(document).ready(function () {
function init() {
if (localStorage["name"]) {
$('#name').val(localStorage["name"]);
}
if (localStorage["email"]) {
$('#email').val(localStorage["email"]);
}
if (localStorage["message"]) {
$('#message').val(localStorage["message"]);
}
}
init();
});
$('.stored').keyup(function () {
localStorage[$(this).attr('name')] = $(this).val();
});
$('#localStorageTest').submit(function() {
localStorage.clear();
});
</script>

La función llamada init se ejecuta cuando la página se carga por primera vez. Esta función comprueba si algún dato ha sido almacenado para cada elemento y lo añade al mismo.

A continuación tenemos la función keyup la cual se ejecuta cuando un usuario presiona una tecla en algún elemento del formulario con la clase “stored”. Esta función añade el valor introducido al localStorage.

Finalmente vamos a la función submit la cuál se ejecuta cuando el usuario envía el formulario. Esta función borra todos los datos almacenados localmente.

Ver Demo Descargar Demo

 

Entradas relacionadas:

  1. Validar formulario en HTML5
  2. Campos de texto con lista de valores predefinidos – Datalist (HTML5)
  3. OpenID
  4. CSS y los clientes de email
  5. 10 funciones javascript
Etiquetado con: , , , ,
Publicado en: Programación

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*