Conocimientos esenciales para SPA y React - Guía completa sobre almacenamiento en el navegador

Los frameworks del lado del servidor como Django o Spring utilizan principalmente el manejo de sesiones (Session) en el servidor y se identifican al cliente a través de cookies (Cookie). Es conveniente porque el servidor gestiona el estado.

Sin embargo, en un entorno de SPA (Single Page Application) como React, Vue o Angular, el cliente (navegador) asume muchas responsabilidades. La comunicación con el servidor se realiza principalmente a través de API para enviar y recibir datos, pero el estado del usuario y la configuración de la interfaz de usuario suelen ser gestionados directamente por el cliente.

En este contexto, necesitamos decidir "dónde" almacenar los datos, y el navegador ofrece varias opciones de almacenamiento para ello. Conocer claramente las características y propósitos de cada uno de estos almacenamientos es clave para el desarrollo eficiente de SPA.

Hoy exploraremos los principales almacenes del navegador: cookies (Cookie), almacenamiento local (Local Storage), almacenamiento de sesión (Session Storage) y IndexedDB.

1. Cookies (Cookie)

Las cookies son el precursor del almacenamiento en el navegador. Fueron diseñadas originalmente para mantener el estado (Stateful) entre el servidor y el cliente.

• Características:

  • Pequeña capacidad: Tienen un límite de aproximadamente 4KB, lo que es bastante pequeño.

  • Transmisión al servidor: Esta es su característica más destacada. Las cookies se incluyen automáticamente en todas las solicitudes HTTP y se envían al servidor. Esto es útil cuando el servidor necesita conocer el estado del cliente, pero puede ralentizar el rendimiento debido a la transmisión innecesaria de datos.

  • Fecha de caducidad: Se puede establecer la fecha y hora de caducidad a través de la propiedad Expires o Max-Age. Si no se establece, se comportará como una cookie de sesión (se elimina al cerrar el navegador).

  • Opciones de seguridad: Se pueden establecer configuraciones de seguridad como HttpOnly (previene el acceso de JavaScript), y Secure (solo se envía a través de HTTPS).

• Usos principales:

  • Autenticación: Almacenan tokens de autenticación (JWT, etc.) emitidos por el servidor, permitiendo que el servidor identifique al usuario cada vez que navega. (Especialmente útil junto con la opción HttpOnly)

  • Seguimiento del usuario y publicidad: Se utilizan para rastrear el historial de visitas o patrones de comportamiento del usuario. (Ej: Google Analytics)

  • Popup de 'No volver a mostrar hoy'

2. Almacenamiento local (Local Storage)

Es parte de la API de Web Storage introducida en HTML5. Se creó para complementar las desventajas de las cookies (capacidad pequeña, transmisión automática al servidor).

• Características:

  • Gran capacidad: Varía según el navegador, pero generalmente proporciona un amplio espacio de 5MB a 10MB.

  • No se envía al servidor: El almacenamiento local (Local Storage) almacena datos solo en el cliente y no se envía automáticamente al servidor. Es ideal para almacenar datos que el servidor no necesita conocer.

  • Permanencia: Los datos se almacenan de manera permanente, y solo desaparecen si el usuario borra la caché del navegador o llama a localStorage.removeItem() en el código JavaScript.

  • API fácil de usar: Proporciona APIs fáciles de usar como localStorage.setItem('key', 'value'), localStorage.getItem('key'). (Solo se pueden almacenar cadenas)

• Usos principales:

  • Almacenamiento de configuraciones del usuario: Para guardar configuraciones de interfaz de usuario elegidas, como el modo claro/oscuro, idioma, etc.

  • Almacenamiento de datos no sensibles: Para guardar listas de contenido visto recientemente, funciones de auto-guardar, etc.

  • Caching de datos: Para almacenar en caché datos de respuestas de API que no cambian con frecuencia y así reducir solicitudes innecesarias.

3. Almacenamiento de sesión (Session Storage)

Comparte casi todas las características del almacenamiento local, pero hay una diferencia determinante en el ciclo de vida (Life Cycle) de los datos.

• Características:

  • Gran capacidad: Proporciona aproximadamente 5MB de capacidad, al igual que el almacenamiento local.

  • No se envía al servidor: Se almacena solo en el cliente.

  • Ciclo de vida basado en la sesión: Los datos están limitados a la pestaña (o ventana) actualmente abierta. Si se cierra esa pestaña, todos los datos de sesión se eliminan inmediatamente.

  • Aislamiento de datos: Incluso en el mismo dominio, los datos no se comparten entre diferentes pestañas.

• Usos principales:

  • Almacenamiento de datos temporales: Para almacenar información que solo debe ser válida en la pestaña actual.

  • Datos de formularios temporales: Para guardar temporalmente lo que el usuario ha ingresado en un formulario a pasos, hasta que cierre la pestaña.

  • Mantener datos al actualizar: Para mantener datos que deben permanecer después de una actualización de la página, pero que deben desaparecer al cerrar la pestaña.

4. IndexedDB

A diferencia del almacenamiento local/sesion, que es un simple almacenamiento Key-Value, IndexedDB es un sistema de base de datos transaccional que existe dentro del navegador.

• Características:

  • Almacenamiento de gran capacidad: Puede almacenar datos muy grandes, desde cientos de MB hasta varios GB, siempre que lo permita el espacio en disco del usuario (varía según la política del navegador).

  • Tipos de datos variados: Puede almacenar no solo cadenas, sino también objetos JavaScript, archivos (Blob), arreglos y otros datos con estructuras complejas.

  • Soporte de transacciones: Asegura la integridad y consistencia de los datos. Varios trabajos pueden agruparse y tratarse como una sola unidad.

  • API asíncrona: Todas las operaciones de IndexedDB se procesan de forma asíncrona, lo que mantiene la capacidad de respuesta de la aplicación al no bloquear el hilo principal de UI mientras se lee y escribe datos grandes.

  • Soporte de índices: Se pueden crear índices para buscar datos de manera muy rápida en campos específicos.

• Desventaja:

  • API compleja: Comparada con localStorage, la API de IndexedDB es significativamente más complicada y menos fácil de usar (por esta razón, a menudo se utilizan bibliotecas envolventes como Dexie.js o idb para facilitar su uso).

• Usos principales:

  • Aplicaciones web offline (PWA): Almacena datos clave en aplicaciones que deben funcionar sin conexión a la red. (Ej: editor de documentos fuera de línea)

  • Cache de estado de aplicaciones grandes: Utilizado por Gemini o ChatGPT para almacenar el historial de conversaciones en el navegador o manejar datos de usuario complejos.

  • Almacenamiento temporal de contenido generado por el usuario: Almacena de forma segura textos largos, datos de edición de imágenes, etc., antes de ser subidos al servidor.

5. Comparación a primera vista

Si resumimos las características de los cuatro tipos de almacenamiento en una tabla, se vería así:

6. Conclusión: ¿Cuándo y qué usar?

Al desarrollar una SPA como React, es conveniente diferenciar claramente el uso de estos cuatro tipos de almacenamiento.

• Cookies (Cookie):

  • Se utilizan para datos que el servidor necesita conocer obligatoriamente. (Ej: tokens de autenticación que son especialmente sensibles)

  • Es recomendable utilizar la opción HttpOnly para proteger los tokens de ataques XSS.

• Almacenamiento Local (Local Storage):

  • Se utiliza para datos simples que deben mantenerse incluso al cerrar y abrir el navegador.

  • (Ej: configuraciones del tema de interfaz del usuario, elecciones de idioma)

• Almacenamiento de Sesión (Session Storage):

  • Se utiliza para datos temporales que solo son necesarios durante la tarea actual (pestaña).

  • (Ej: guardado temporal durante los pasos de un formulario)

• IndexedDB:

  • Se usa cuando se necesita donde se necesitan datos estructurados y de gran tamaño o soporte offline.

  • (Ej: estado complejo de la aplicación, almacenamiento en caché del historial de conversación, datos de documentos offline)

Nota de seguridad importante: El almacenamiento local, almacenamiento de sesión e IndexedDB son fácilmente accesibles desde JavaScript. Eso significa que son vulnerables a ataques XSS (Cross-Site Scripting). No debe almacenar nunca información sensible como contraseñas, información de identificación personal, o tokens de autenticación sensibles aquí. (La forma más segura es usar HttpOnly cookies para los tokens de autenticación.)