sessionStorage, IndexedDB y elección de la API adecuada

sessionStorage expone exactamente los mismos métodos que localStorage, pero su duración está vinculada a la pestaña. Cuando se cierra la pestaña o la ventana, sus datos se borran automáticamente.

También está aislado por pestaña, por lo que dos pestañas no comparten los datos de sessionStorage.

sessionStorage resulta ideal para un asistente de varios pasos en el que desea conservar el progreso durante la sesión y las recargas, pero descartarlo cuando se cierre la pestaña.

El usuario puede recargar la página a mitad del formulario sin perder los datos introducidos, pero nada permanece después de terminar o salir.

IndexedDB es una base de datos asíncrona y transaccional integrada en el navegador. Puede almacenar mucho más que el límite de 5 MB de localStorage y gestionar objetos estructurados, arrays e incluso datos binarios.

Como es asíncrona, no bloquea el hilo principal como lo hace localStorage.

La API básica de IndexedDB es extensa y se basa en eventos, por lo que bibliotecas como idb-keyval la envuelven en funciones sencillas basadas en promesas, como get, set y del.

Esto proporciona una ergonomía similar a localStorage, con la capacidad y el comportamiento asíncrono de IndexedDB.

Como IndexedDB puede almacenar valores Blob y ArrayBuffer, resulta ideal para almacenar en caché imágenes, audio, archivos descargados o recursos sin conexión.

Estos datos superarían rápidamente los límites de localStorage y tendrían que convertirse en cadenas, algo que IndexedDB evita.

La API Cache, que suele utilizarse con service workers, almacena objetos Response HTTP completos asociados a una solicitud. Está diseñada específicamente para almacenar en caché respuestas de red con un enfoque offline-first.

Utilícela para servir recursos y respuestas de API sin acceder a la red cuando no haya conexión.

localStorage persiste permanentemente hasta que se borra, sessionStorage dura únicamente durante la sesión de la pestaña, IndexedDB persiste permanentemente y las cookies tienen una caducidad configurable mediante sus atributos.

Hacer coincidir la duración que necesita con el almacén adecuado evita sorpresas sobre cuándo desaparecen los datos.

localStorage y sessionStorage están limitados a aproximadamente 5 MB, las cookies a unos 4 KB cada una, mientras que IndexedDB puede utilizar cientos de megabytes o más, según el dispositivo y el navegador.

Para cualquier cantidad considerable de datos, IndexedDB es la única opción práctica en el navegador.

localStorage, sessionStorage y las cookies son síncronos y bloquean el hilo principal durante el acceso. IndexedDB y la Cache API son asíncronos y se basan en Promises.

El acceso asíncrono mantiene la interfaz receptiva incluso al leer o escribir cantidades grandes de datos.

Utilice cookies httpOnly para los tokens de autenticación, de modo que los scripts no puedan leerlos; localStorage para preferencias persistentes pequeñas; IndexedDB para archivos grandes y datos complejos sin conexión; y sessionStorage para borradores temporales dentro de una pestaña.

Adapte el almacenamiento a la sensibilidad, el tamaño y la duración de los datos.

No existe una única API de almacenamiento que sea la mejor en todos los casos; cada una ofrece un equilibrio diferente entre capacidad, persistencia, comportamiento síncrono y seguridad. Conocer sus diferencias le permite elegir de forma deliberada.

Una aplicación típica utiliza varias: cookies para la autenticación, localStorage para las preferencias e IndexedDB para los recursos sin conexión.

Compruebe cuánto ha aprendido sobre las opciones de almacenamiento.

Ha comparado sessionStorage, localStorage, IndexedDB, las cookies y la Cache API en cuanto a persistencia, capacidad, comportamiento síncrono y seguridad.

Ha aprendido a elegir según el caso de uso: cookies para la autenticación, localStorage para preferencias pequeñas, IndexedDB para datos grandes o complejos y sessionStorage para borradores limitados a una pestaña.