Fundamentos de las Cookies HTTP

Las cookies HTTP son un mecanismo fundamental para mantener el estado en las aplicaciones web. Dado que el protocolo HTTP es inherentemente sin estado, las cookies permiten al servidor enviar pequeños fragmentos de datos al naevgador del cliente, los cuales se almacenan localmente y se retransmiten automáticamente en cada solicitud HTTP posterior al mismo dominio.

Características Principales

• Capacidad limitada: Restringidsa a aproximadamente 4 KB por cookie.
• Formato: Se almacenan exclusivamente como cadenas de texto.
• Transmisión: Se envían en las cabeceras de cada petición HTTP, lo que puede afectar el rendimiento si se abusa de su uso.
• Seguridad: Son vulnerables a ataques como XSS (Cross-Site Scripting) o CSRF si no se configuran adecuadamente.

Atributos de Configuración

Una cookie se define mediante un par clave-valor y puede incluir varios atributos para controlar su comportamiento:

• Expires / Max-Age: Define el tiempo de vida de la cookie.
• Path: Especifica la ruta URL para la cual la cookie es válida.
• Domain: Permite configurar la cookie para subdominios específicos.
• Secure: Garantiza que la cookie solo se transmita a través de conexiones HTTPS.
• HttpOnly: Previene el acceso a la cookie mediante scripts del lado del cliente (JavaScript).

Manipulación de Cookies con JavaScript

La API nativa del navegador para gestionar cookies se accede a través de document.cookie. A continuación, se muestran ejemplos refactorizados de las operaciones básicas.

Creación y Lectura

// Crear una cookie con atributos de seguridad y expiración
document.cookie = "authToken=xyz987secure; path=/; secure; max-age=3600";

// Función auxiliar para extraer el valor de una cookie por su nombre
function obtenerValorCookie(nombre) {
    const cookies = document.cookie.split('; ');
    const cookieObjetivo = cookies.find(c => c.startsWith(nombre + '='));
    return cookieObjetivo ? decodeURIComponent(cookieObjetivo.split('=')[1]) : null;
}

console.log(obtenerValorCookie('authToken')); // Salida: xyz987secure

Actualización y Eliminación

Para actualizar una cookie, simplemente se vuelve a asignar con el mismo nombre. Para eliminarla, se debe establecer su fecha de expiración en el pasado.

// Actualizar el valor de la cookie existente
document.cookie = "authToken=nuevoToken123; path=/; secure; max-age=3600";

// Eliminar la cookie forzando una fecha de expiración en el pasado
document.cookie = "authToken=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Intercambio de Datos con JSON

JSON (JavaScript Object Notation) es un formato de texto ligero para el intercambio de datos. Es independiente del lenguaje, aunque utiliza convenciones familiares para los programadores de múltiples ecosistemas.

Sintaxis y Estructura

JSON se basa en dos estructuras universales:

• Objetos: Colecciones desordenadas de pares clave/valor, donde las claves deben estar encerradas estrictamente entre comillas dobles.
• Arrays: Listas ordenadas de valores, encerradas entre corcchetes.

Serialización y Deserialización

En JavaScript, la conversión entre objetos y cadenas JSON se realiza mediante métodos nativos seguros. El uso de eval() para parsear JSON está completamente desaconsejado por graves riesgos de inyección de código.

const datosUsuario = {
    id: 409,
    nombre: "Elena",
    roles: ["editor", "viewer"],
    activo: true
};

// Serialización: Convertir objeto JavaScript a cadena JSON
const cadenaJSON = JSON.stringify(datosUsuario);
console.log(cadenaJSON); 
// Salida: {"id":409,"nombre":"Elena","roles":["editor","viewer"],"activo":true}

// Deserialización: Convertir cadena JSON a objeto JavaScript
const textoRecibido = '{"id":409,"nombre":"Elena","roles":["editor","viewer"],"activo":true}';
const objetoRecuperado = JSON.parse(textoRecibido);
console.log(objetoRecuperado.roles[0]); // Salida: editor

API de Web Storage: localStorage y sessionStorage

La API de Web Storage proporciona un mecanismo para almacenar pares clave-valor en el navegador de manera más robusta y con mayor capacidad que las cookies tradicionales.

Métodos Principales

Tanto localStorage como sessionStorage comparten la misma interfaz de métodos:

• setItem(clave, valor): Almacena un par clave-valor.
• getItem(clave): Recupera el valor asociado a una clave.
• removeItem(clave): Elimina el par clave-valor especificado.
• clear(): Vacía todo el almacenamiento.

Diferencias Clave entre Cookies y Web Storage

• Capacidad: localStorage ofrece aproximadamente 5 MB (varía según el navegador), mientras que las cookies están limitadas a 4 KB.
• Transmisión al Servidor: Las cookies se envían automáticamente en cada petición HTTP. Los datos en localStorage y sessionStorage permanecen en el cliente y no se transmiten al servidor a menos que se envíen explícitamente mediante código.
• Ciclo de Vida: localStorage no tiene fecha de expiración y persiste hasta que se borre manualmente. sessionStorage se elimina al cerrar la pestaña o el navegador. Las cookies requieren una configuración explícita de expiración.
• Formato de Datos: Web Storage solo acepta cadenas de texto, al igual que las cookies. Para almacenar objetos complejos o estructuras anidadas, es necesario serializarlos previamente con JSON.stringify().