Una de las nuevas características de HTML 5, la cual fue implementada de manera casi inmediata por los navegadores más utilizados, es Web Storage API. La especificación de la misma está a día de hoy en Recommendation Candidate y tiene como objetivo el almacenamiento de información de manera persistente en el lado del cliente.

Lo primero que podemos pensar al respecto es que ya disponemos de las cookies como mecanismo de almacenamiento, pero podemos valorar algunas ventajas al respecto:

1. La información almacenada con Web Storage no viaja en cada petición al servidor.
2. Podemos guardar mayor cantidad de datos que en una cookie (algunos navegadores tienen el límite en 50MB de almacenamiento e incluso se puede ampliar la cuota).
3. A día de hoy está implementado en Opera, Internet Explorer, Firefox, Chrome y Safari por lo que cubriríamos los navegadores más utilizados del mercado (en sus últimas versiones).
4. Su uso es bastante sencillo, ya que almacenamos la información a través de clave-valor.

Para comprender exactamente cómo funciona, veamos el siguiente ejemplo 🙂

Como podemos ver, el contenido es bastante sencillo. Lo único que se muestra es un textarea y dos botones para guardar o eliminar el contenido. Antes de introducirnos en la parte de local storage, podemos probar lo siguiente: Añadimos un par de líneas con un par de nuestros deseos 😉 y pulsamos sobre el botón Save wish list. Una vez quede guardado el contenido, salimos de nuestro navegador y volvemos a acceder a esta misma dirección y este mismo post 🙂

¿Qué hemos conseguido? Dicha información introducida y guardada con posterioridad sigue manteniéndose de manera persistente en el navegador y, en este caso, sigue ocupando el textarea tal y como lo dejamos 🙂 Veamos cómo funciona:

window.onload = function() {
    //Handlers
    var btnSave = document.getElementById("btnSave");
    var btnDelete = document.getElementById("btnDelete");
    var wishes = document.getElementById("txtWishes");
    btnSave.addEventListener("click", function() {
        window.localStorage.wishes = wishes.value.split("n").join(",");
    });
    btnDelete.addEventListener("click", function() {
        window.localStorage.removeItem("wishes");
        wishes.value = "";
    });
    //Get previous data
    if (window.localStorage) {
        var wishesStorage = window.localStorage.wishes;
        if (wishesStorage) wishes.value = wishesStorage.split(",").join("n");
    }
}​

Almacenando información

En este caso estoy utilizando window.onload para inicializar tanto los handlers como la carga del textarea con la posible información que hayamos podido introducir.
En el primer apartado, lo único que hacemos es manejar el evento click de ambos botones a través de addEventListener. Para hacer uso de local storage, accedemos a window.localStorage (el cual no estaría disponible si el navegador no acepta esta capacidad). Cuando necesitamos crear o guardar información lo primero que debemos decidir es la clave para la información, en este caso wishes. La forma de crear esta clave e introducir información en ella podría ser como vemos en el ejemplo, window.localStorage.wishes (la cual es mi preferida, ya que te permite hacer uso de intellisense en algunos IDEs), o podríamos crearla/utilizarla de las siguientes formas:

window.localStorage.setItem("wishes","My data");
window.localStorage["wishes"] = "My data";

En algunos navegadores, como Chrome o Safari, permiten ver la información almacenada por dominio:

Eliminando datos

Para eliminar el contenido de una clave del storage la manera más apropiada es a través de removeItem:

window.localStorage.removeItem("wishes");

También existe otra alternativa si lo que necesitamos es eliminar toda la información, donde podríamos utilizar clear:

window.localStorage.clear();

Recuperar nuestra información previamente almacenada

Por último, para poder recuperar la información una vez ha sido almacenada y hemos abandonado la página ¡e incluso el navegador! recurriríamos a la clave donde hemos depositado nuestra información dentro de local storage, a través del alias asignado o bien de estas otras dos alternativas:

window.localStorage.getItem("wishes");
window.localStorage["wishes"];

Expiración

Según la especificación oficial, es posible que los navegadores puedan implementar la capacidad de eliminar la información tras un periodo de tiempo. Si lo que realmente necesitamos que dicha información sólo esté disponible mientras el usuario esté navegando dentro de nuestra página, en lugar de utilizar local storage, podríamos hacer uso de session storage, funcionalidad que pertenece a la misma API y nos permite mantener la información almacenada y accesible únicamente para la pestaña actual. Una vez que el navegador se haya cerrado la información será descartada. Del mismo modo, dicha información no podrá ser recuperada desde ninguna otra pestaña de dicho navegador. La forma de uso es exactamente igual que local storage y se accedería de la siguiente forma:

if(window.sessionStorage) //Save things
   window.sessionStorage.wishes = "My temp wishes";

Es importante tener en cuenta que toda aquella información que se almacene, recupere y/o se elimine siempre se hará a nivel de dominio, no afectando al contenido manipulado por otros sitios diferentes al nuestro.

Espero que haya sido de utilidad para comenzar con esta magnífica API de HTML 5 🙂

Demo completa: Web Storage API

¡Saludos!