Almacenamiento local en html5

Una de las capacidades nuevas y más interesantes de HTML5 es la de poder almacenar datos de forma local y persistente en los navegadores más modernos. Algo que antes se podía lograr pero no de una forma tan simple e innovadora.

Anteriormente cuando buscábamos almacenar datos de forma local utilizábamos las famosas cookies, esta practica si bien todavía se utiliza cuenta con algunas desventajas, por ejemplo, las cookies son incluidas en todas las llamadas HTTP, haciendo bastante más lenta la transferencia de información entre el servidor y el usuario.

Otro problema, y este más importante, es el referido al tamaño máximo permitido para almacenar datos, las cookies en la mayoría de los navegadores cuentan con un limite de apenas unos 4kb, esto hace que la diferencia con Local Storage sea abismal, a continuación una tabla que muestra la capacidad de cada navegador de almacenar datos y sus restricciones según el caso.

soporte local storage

Como pueden ver las diferencias son gigantes si lo vemos en comparación al uso de cookies. Ahora bien, ¿Como utilizar Local Storage?

La forma más simple que encontré es jStorage, un plugin que funciona de forma conjunta con los frameworks javascript más populares, estoy hablando de Prototype, MooTools y como es de esperarse, jQuery.

Un ejemplo sencillo de como utilizar este plugin sería:

Grabar:

$.jStorage.set(key, value)

Recuperar:

value = $.jStorage.get(key)

Borrar:

$.jStorage.deleteKey(key)

En la web oficial del plugin pueden encontrar varios ejemplos y funciones adicionales para interactuar con local storage, queda en cada uno de nosotros analizar si utilizar esta nueva característica merece la pena.

Web: jStorage