aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Josh Resig, creador de jQuery y actual encargado del desarollo del javascript de Mozilla Firefox. Publicó el otro día una entrada acerca del nuevo almacenamiento DOM, una de las partes más impotantes de las Web Applications 1.0.

 El almacenamiento DOM, es una versión mejorada de las cookies HTTP. En estas nuevas cookies nos es posible usar la estructura clave/valor para almacenar de forma segura nuestros datos y poder reutilizarlos más adelante. Actualmente, como suele ser constumbre, solo los navegadores basados en Mozilla disponen de esta característica, aunque Internet Explorer dispone de una característica similar llamada userData behavior.

Y, ¿esto que significa?

Imaginemos que tenemos una aplicación en la que enviamos mails, si estos mails son enviados al servidor, siempre que haya conexión podremos verlos, pero si estos datos además son almacenados en el cliente, aunque no tengamos conexión podremos disponer de ellas. Al igual que aplicaciones en 2 capas como Outlook, Thunderbird,… envian los datos al servidor y a la vez guardan una copia local del correo electrónico.

Un ejemplo de este proceso es halfnote, que almacena notas en el cliente y en el servidor de forma simultanea, consiguiendo una forma más segura y eficiente de mantener nuestras notas.

Este tipo de mejoras hacen posibles que aunque pierdas la conexión, no tengas por que temer en que se pierdan tus datos, una aplicación preparada podría leer esos datos y volver a cargarlos y posteriormente enviarlos de nuevo al servidor si es que tenemos conexión.

Disponemos de sessionStorage, un objeto de lectura / escritura en que podremos almacenadar datos y recuperarlos de la siguiente forma.

sessionStorage.nombre = "Pepe";
alert(sessionStorage.nombre);

Veamos además un ejemplo de como montar un sistema de recuperación en caso parada accidental del navegador.

 // Obtener el campo de texto al que vamos a seguir la pista
 var field = document.getElementById("field");

 // Ver si se tiene un valor de autoguardado
 // (esto sólo sucede si la página es actualizada accidentelmente)
 if ( sessionStorage.autosave ) {
     // Restore the contents of the text field
     field.value = sessionStorage.autosave;
 }

 // Comprobar los contenidos del campo de texto cada segundo
 setInterval(function(){
     // And save the results into the session storage object
     sessionStorage.autosave = field.value;
 }, 1000);

Además globalStorage nos permite mantener diferntes áreas en nuestros scripts. Podiendo limitar la disponibilidad de ciertos datos ciertos dominios concretos.

// Guardar datos a los que sólo pueden acceder scripts del dominio mozilla.org
globalStorage['mozilla.org'].snippet = "<b>Hello</b>, how are you?";

// Guardar algunos datos que cualquier página web de cualquier dominio puede acceder
globalStorage[''].favBrowser = "Firefox"; 

Más Información

• DOM Storage Test, ejemplo del uso de esta funcionalidad.
• Web Applications 1.0, especificación.
• Almacenamiento DOM, mucho mejor explicado y con más ejemplos.