HTML5 y las APIs de almacenamiento local

Unas de las novedades de HTML5 es la inclusión de 2 APIs referidas al almacenamiento local de datos: sessionStorage, que almacena los datos hasta que finaliza la sesión/instancia del navegador, y localStorage que almacena los datos para “siempre” (hasta que el código o el usuario lo borre).

Los datos almacenados deben ser strings. Si necesitas almacenar objetos complejos, siempre puedes serializar los objetos con JSON usando JSON.stringfy().

Ambas APIs usan javaScript, de manera que no es preciso importar la librería de jquery. Basta con meter el código entre etiquetas script, preferiblemente cerca del cierre del body.

Un ejemplo para almacenar los datos hasta que finalice la sesión del navegador.

Y este caso sería si quisiéramos almacenar de manera permanente los datos.

Ahora para obtener los datos sería como acceder a un objeto. Al haber nombrado los items con el id de usuario será lo que uso para obtener los datos.

Las APIs almacenamiento local, localStorage y sessionStorage, actúan de manera síncrona lo que puede ralentizar el rendimiento de la página. Trata de usarlos de manera prudente.

Métodos

Método Función
getItem(key) Devuelveun elemento de datos referenciado por la key.
setItem(key, item) Añadeun dato referenciado por su key.
key(index) Devuelve la key de un item de datos con el índice especificado.
removeItem(key) Elimina un item de contenedor de datos referenciado por su key.
clear() Limpia todos los datos del contenedor de datos.
length Permite conocer cuanto elementos forman el contenedor de datos.

Puntos a tener en cuenta

Muchos de los navegadores proporcionan para el almacenamiento local hasta 5MB. Para aplicaciones prácticas es algo más que suficiente.

A diferencia de las cookies que tienen una expiración determinada, sessionStorage finaliza cuando se cierra la sesión y en términos de persistencia localStorage no tiene caducidad.

En el caso del localStorage los valores permanecen hasta que el usuario lo limpie pero, hay que tener el cuenta el límite de 5MB y puede que el usuario nunca haga limpieza del navegador haciendo que se alcance el límite pronto. Ante esos casos, es mejor anticiparse y asegurar que los datos antiguos o los que no se usen se borren.

La solución más común es añadir un tiempo de expiración almacenando un timestamp que cada página comprobará cada vez que se carga para ver si los datos son preciso eliminarlos.

Creo un item de datos que se almacena en localStorage

Ahora para borrar todos los elementos antiguos, empleo un bucle que recorre todo el contenedor de datos.

Y hasta aquí el almacenamiento local de HTML5, espero que le podáis sacar partido. A seguir picando 🙂