La API de almacenamiento web proporciona los mecanismos mediante los cuales el navegador puede almacenar información de tipo clave/valor, de una forma mucho más intuitiva que utilizando cookies.
Almacenamiento web, conceptos y uso
Los dos mecanismos en el almacenamiento web son los siguientes:
sessionStoragemantiene un área de almacenamiento separada para cada origen que está disponible por la duración de la sesión de la página (tanto si el navegador esta abierto como si no, incluyendo recargas de página y restablecimientos).localStoragehace lo mismo, pero persiste incluso cuando el navegador es cerrado y reabierto.
Estos mecanismos están disponibles mediante las propiedades Window.sessionStorage y Window.localStorage (para ser mas precisos, para soportar navegadores el objeto Window object implementa los objetos WindowLocalStorage y WindowSessionStorage, en los cuales se basan las propiedades localStorage y sessionStorage) — invocando uno de estos creará una instancia del objeto Storage, a través del cual los elementos de información pueden ser creados, recuperados y eliminados. sessionStorage y localStorage utilizan un objeto de almacenamiento diferente según su origen — funcionan y son controlados por separado.
Nota: Acceder al Almacenamiento web desde IFrames de terceros está prohibido si el usuario tiene deshabilitadas las cookies de terceros (Firefox implementa este comportamiento a partir de la version 43).
Nota: Almacenamiento web no es lo mismo que mozStorage (Mozilla's XPCOM interfaces para SQLite) o la Session store API (Una utilidad de almacenamiento XPCOM para ser usada por extensiones).
Interfaces de almacenamiento web
Storage- Permite crear, recuperar y eliminar datos de un dominio específico y tipo de almacenamiento (sesión o local).
Window- La API de almacenamiento web extiende el objeto
Windowcon dos nuevas propiedades —Window.sessionStorageyWindow.localStorage— la cual provee acceso a la sesión actual del dominio y a objetos localesStoragerespectivamente. StorageEvent- El evento
storagees lanzado en el objeto Window de un documento cuando un área de almacenamiento cambia.
Ejemplos
Para ilustrar algunos usos típicos del almacenamiento web, hemos creado un ejemplo simple, llamado Web Storage Demo. La landing page proporciona controles que puedes utilizar para personalizar el color, tipografía e imagen decorativa. Al elegir opciones diferentes, la pagina se actualiza al instante; además, las opciones son almacenades en localStorage, para que cuando se abandones la página y vuelvas a cargarla más tarde, las opciones sean recordadas.
Además, hemos proporcionado una página de salida de eventos — si cargas esta página en otra pestaña y luego haces cambios a tus opciones en la landing page, verás la información actualizada almacenada reflejada en cuanto el evento StorageEvent es lanzado.
Especificaciones
| Especificación | Estado | Comentario |
|---|---|---|
| Web Storage (Second edition) | Recommendation |
Compatibilidad en navegadores
| Característica | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari (WebKit) |
|---|---|---|---|---|---|
| localStorage | 4 | 3.5 | 8 | 10.50 | 4 |
| sessionStorage | 5 | 2 | 8 | 10.50 | 4 |
| Caracteristica | Android | Firefox Mobile (Gecko) | IE Phone | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Basic support | 2.1 | ? | 8 | 11 | iOS 3.2 |
Todos los navegadores tienen niveles variantes de capacidad para ambos, localStorage y sessionStorage. Aquí está una análisis detallado de todas las capacidades de almacenamiento de diferentes navegadores.
Nota: Desde iOS 5.1, Safari Mobile almacena los datos de localStorage en la carpeta de caché, la cual está sujeta a la limpieza ocasional, a petición del sistema operativo, típicamente si el espacio es reducido.
Navegación privada / Modo incógnito
La mayoría de los navegadores de hoy en día soportan una opción de privacidad llamada 'Modo incógnito', 'Navegación privada', o algo similar, que básicamente se asegura de que la sesión de navegación no deje rastros después de que el navegador sea cerrado. Esto es fundamentalmente incompatible con el Almacenamiento web por obvias razones. Por ello, muchos navegadores están experimentando con diferentes escenarios para lidiar con esta incompatibilidad.
La mayoría de los navegadores han optado por una estrategia donde las API de Almacenamiento sigan disponibles y aparentemente completamente funcionales, con la única gran diferencia que todos los datos almacenados son eliminados después de cerrar el navegador. Para estos navegadores aún hay diferentes interpretaciones sobre qué debería hacerse con los datos almacenados existentes (de una sesión de navegación normal). ¿Debería estar disponible para lectura cuando esté en modo privado? Entonces, hay algunos navegadores, más notablemente Safari, que han optado por una solución donde el almacenamiento esté disponible pero vacío, y que tenga una cuota de 0 bytes asignada, haciendo imposible escribir datos en esta.
Los desarrolladores deberían ser conscientes de estas diferentes implementaciones y tenerlas en cuenta a la hora de desarrollar aplicaciones web dependientes de la API de Almacenamiento web. Para más información, échale un vistazo a esta entrada de blog WHATWG que trata específicamente con este problema.