Almacenamiento con HTML5, Web Storage

Con el nuevo estándar de HTML, en su versión 5 se ha implementado un nuevo modo de almacenamiento que sustituye a las antiguas cookies que nos han estado acompañando hasta las versiones más recientes de los navegadores.

Cuando en nuestros primeros años de programación de la web, para saber las preferencias sobre nuestro sitio de un usuario o cuando simplemente queríamos guardar algún dato relevante sobre la elección de un cliente incluso cuando este apagara el navegador utilizábamos dicha tecnología, las cookies.

Para al que a día de hoy no sepa lo que es una cookie, les diré que a grandes rasgos se trata de un fichero plano de texto que se guarda en nuestro disco duro con la información que el propio programador quiere almacenar sobre unos determinados parámetros del visitante. Dicho fichero debía ocupar muy poco espacio (alrededor de unos pocos KB) que posteriormente el propio navegador leía e interpretaba.

A día de hoy, con el recien llegado HTML5 y las nuevas versiones de los navegadores, incorporan lo que podríamos denominar las cookies 2.0 o lo que es lo mismmo el Storage que permite un almacenamiento en el navegador de hasta 5MB. Existen 2 tipos de almacenamiento, el localStorage y el sessionStorage, pero de ellos hablaré más adelante.

En la actualidad, los únicos navegadores que admiten el Web Storage son: Firefox, Oprea, Chrome, Safari y versiones superiores a IE8.

Como anunciabamos anteriormente, existen dos tipos de almacenamiento (localStorage y sessionStorage). La diferencia que existe entre ambos es que en el primer caso, los datos que se almacenan en el navegador son permanentes hasta que se limpia la caché, mientras que en el segundo tipo los datos son eliminados cuando se cierra la sesión en el navegador

Para saber si nuestro navegador soporta el Web Storage se puede realizar un simple ejemplo con javascript:

window.onload = function() {
    //Se puede emplear tanto el objeto localStorage como sessionStorage
    if(localStorage){
        //Existe el localStorage y podemos hacer almacenamiento
        alert("Si tienes LocalStorage");
    } else {
        //No existe localStorage
        alert("No tienes LocalStorage");
    }
}

Si ya sabemos si nuestro navegador soporta o no el almacenamiento de contenido, el acceso a él es muy sencillo, basta con utilizar el objeto localStorage de la siguiente manera:

localStorage.setItem("nombreVariable", "valorVariable");

Una vez que ya se ha insertado una variable con valor, para acceder a ella deberemos insertar la siguiente línea:

localStorage.getItem("nombreVariable");

Pero si lo que queremos es tener un listado de todas las variables almacenadas por nuestro navegador, tendremos que incluir el siguiente fragmento:

for (x=0; x<=localStorage.length-1; x++){
    //conseguimos la clave de la posicion
    clave = localStorage.key(x);
    //conseguimos el dato através de la clave
    //tendríamos que introducir algo para imprimir lo que obtenemos a continuación
    localStorage.getItem(clave);
}

Y para finalizar, si lo que queremos tal vez sea limpiar un dato en concreto o vaciar la caché completa, se pueden utilizar los códigos que acontinuación se exponen:

    //Para eliminar una variable en concreto
    localStorage.removeItem("usuario");
    //Para vaciar la caché completa
    localStorage.clear();

Espero que estos consejos con ejemplos prácticos sirvan para ayudaros a elaborar y entender el funcionamiento del Web Storage, aunque existen muchas más posibilidades que se expondrán en siguientes artículos.