Local Storage

Los navegadores modernos van disfrutando de nuevas capacidades impulsadas por HTML5. Una de las más llamativas es la posibilidad del almacenamiento local, en el cliente, que viene en dos formas: por un lado en dos arrays relacionales que nos permiten guardar datos con un límite supuesto de 5Mb (al estilo del $_SESSION de php pero en el cliente) y por otra parte la posibilidad de tener una base de datos en el cliente. Está última, que un principio parecía iba a ser SQLite finalmente parece que será IndexedDB, puro JS. Otro día.

¿Para qué nos iba a interesar guardar datos en el cliente? Con HTML5 se aspira a crear aplicaciones, programas que funcionen incluso sin necesidad de conectarse a la red. HTML5 podría convertirse, qué narices, ES el anillo único: puede funcionar en todos los sistemas y dispositivos. Y el navegador que no sea compatible, que se ponga las pilas. La posiblidad de guardar datos en en cliente nos facilitaría el desarrollo de esas aplicaciones, en las que por ejemplo, se podrían guardar configuraciones básicas, perfiles de usuario, etc... Otra cosa es que luego HTML5 se apoye en algún backend de datos, que también.

localStorage y sessionStorage

Dentro de javascript disponemos de esos dos objetos que básicamente no son más que arrays relacionales o hashtables, es decir arrays cuyos índices no son numéricos de 0..a lo que sea sino palabras clave que no se pueden repetir (también tienen métodos). La diferencia entre los dos es que lo que guardamos en localStorage está disponible a pesar de cerrar el navegador mientras que en el caso de sessionStorage no. 

// para guardar datos
localStorage['usuario'] = 'Juan Pardo';
sessionStorage['clave'] = '606601';

// para recuperarlos.
console.log(localStorage['usuario']);

Parece que de forma directa en la mayoría de navegadores no permite almacenar objetos pero podemos pasar los objetos a JSON y listo. Luego además si extendemos con prototype esa funcionalidad en localStorage y sessionStorage pues tendremos algo más elegante.

Demo

Esto también debiera ir a la sección labs... en fin. ¿Quieres comprobar si esto del localStorage funciona en tu navegador? Prueba el siguiente formulario, y si quieres ver cómo está hecho mira el código fuente de esta página.


Key: Value:

Key: Value:

En caso de navegadores desfasados existen workaround agrupados en librerías y soluciones que cubren cualquier eventualidad. De forma general (para arreglar HTML5, CSS3 entre otros) tenemos modernizer y para el caso del localStorage tenemos jStore