1. Cookies: El estándar clásico de transferencia

Las cookies son pequeños fragmentos de texto que el servidor envía al navegador y que este devuelve en cada petición subsiguiente. Aunque su uso ha disminuido para el almacenamiento de datos generales, siguen siendo fundamentales para la gestión de sesiones.

• Capacidad: Limitada a aproximadmaente 4KB por cookie.
• Persistencia: Se puede definir una fecha de expiración; de lo contrario, se eliminan al cerrar el navegador.
• Transmisión: Se adjuntan automáticamente en las cabeceras HTTP de cada solicitud al dominio correspondiente.

// Definir una cookie con tiempo de vida de 24 horas
const caducidad = new Date();
caducidad.setTime(caducidad.getTime() + (24 * 60 * 60 * 1000));

document.cookie = "token_sesion=abc88921; expires=" + caducidad.toUTCString() + "; path=/; Secure; SameSite=Strict";

// Lectura básica de cookies
console.log(document.cookie);

2. Web Storage: Almacenamiento clave-valor

La API de Web Storage proporciona un mecanismo más intuitivo y con mayor capacidad que las cookies para guardar datos de forma local sin enviarlos al servidor de manera automática.

localStorage vs. sessionStorage

Puesto que solo admiten cadenas de texto, es necesario serializar objetos complejos utilizando JSON.

// Guardar configuración de interfaz
const preferencias = {
    tema: 'oscuro',
    fuente: 'Roboto',
    zoom: 1.2
};

localStorage.setItem('config_usuario', JSON.stringify(preferencias));

// Recuperar y procesar datos
const configGuardada = JSON.parse(localStorage.getItem('config_usuario'));
if (configGuardada?.tema === 'oscuro') {
    document.body.classList.add('dark-mode');
}

3. IndexedDB: La base de datos transaccional del cliente

Para aplicaciones que requieren manejar grandes volúmenes de información estructurada, como aplicaciones sin conexión (Offline-first) o editores complejos, IndexedDB es la solución ideal. Es una base de datos NoSQL orientada a objetos.

• Estructura: Almacena objetos de JavaScript nativos, no solo strings.
• Asíncrona: No bloquea el hilo principal de ejecución.
• Consultas: Permite el uso de índices para búsquedas rápidas.

// Apertura de una base de datos para un inventario
const peticionDB = indexedDB.open("SistemaInventario", 1);

peticionDB.onupgradeneeded = (evento) => {
    const db = evento.target.result;
    // Crear almacén de objetos con una clave autoincremental
    const almacen = db.createObjectStore("productos", { keyPath: "sku" });
    almacen.createIndex("nombreIdx", "nombre", { unique: false });
};

peticionDB.onsuccess = (evento) => {
    const db = evento.target.result;
    const transaccion = db.transaction(["productos"], "readwrite");
    const almacen = transaccion.objectStore("productos");

    // Insertar un nuevo registro
    almacen.add({ sku: "PROD-001", nombre: "Monitor 4K", stock: 15 });
    
    transaccion.oncomplete = () => console.log("Transacción finalizada con éxito");
};

Comparativa y Criterios de Selección

La elección de la tecnología depende estrictamente de la naturaleza de los datos y el rendimiento requerido:

1. Cookies: Utilícelas exclusivamente para tokens de autenticación y datos que el servidor necesite conocer en cada petición (configurando siempre las flags HttpOnly y Secure).
2. Web Storage: Ideal para estados de la interfaz, preferencias de usuario simples o datos temporales de formularios que no requieren consultas complejas.
3. IndexedDB: La mejor opción para caché de archivos, catálogos de productos extensos o cualquier escenario donde la integridad de los datos requiera transacciones.

Es importante recordar que todos estos mecanismos están sujetos a la Política del Mismo Origen (Same-Origin Policy), lo que garantiza que los datos guardados por un sitio web no puedan ser leídos por otro dominio distinto, manteniendo la seguridad de la información del usuario.