Cookies en JavaScript

Las cookies en JavaScript son fundamentales para guardar información en el navegador y mejorar la experiencia del usuario. En esta guía aprenderás cómo funcionan, cómo crearlas, leerlas y gestionarlas correctamente en proyectos reales con el DOM, aplicando buenas prácticas y optimización profesional.

Índice

1. Introducción a las cookies

1.1. ¿Qué son las cookies en JavaScript?

En el desarrollo web moderno, las cookies en JavaScript son pequeños fragmentos de datos que un servidor o un script del lado del cliente almacena en el navegador del usuario.

Su función principal es actuar como una «memoria» a corto o largo plazo para que los sitios web puedan identificar a los usuarios y recordar sus acciones o preferencias entre distintas sesiones.

Desde una perspectiva técnica, una cookie es un archivo de texto limitado (generalmente de hasta 4KB) que se envía en las cabeceras HTTP en cada petición al servidor, permitiendo mantener el «estado» en un protocolo que, por naturaleza, no lo tiene.

1.2. Componentes clave

Para que una cookie sea efectiva y segura, debe configurarse con los siguientes parámetros:

Nombre y Valor:
- La identificación básica del dato (ej. user_theme=dark).
Expires / Max-Age:
- Define la vida útil. Sin esto, la cookie es de «sesión» y se borra al cerrar el navegador.
Path (Ruta):
- Indica en qué secciones del sitio estará disponible la cookie.
Domain (Dominio):
- Especifica los subdominios que pueden acceder a los datos.
Atributos de Seguridad (Secure y HttpOnly):
- Secure asegura que solo se envíe por HTTPS, mientras que HttpOnly previene que scripts maliciosos (XSS) accedan a ella.
SameSite:
- Protege contra ataques de falsificación de peticiones en sitios cruzados (CSRF).

1.3. ¿Para que sirven?

Gestión de sesiones: Mantener al usuario logueado mientras navega por diferentes páginas. Permite conservar el estado de autenticación del usuario.

Ejemplos: Mantener la sesión iniciada en Gmail, permanecer logueado en Facebook o acceder a tu cuenta en Amazon sin volver a ingresar tus credenciales en cada página.
Personalización: Recordar el idioma elegido, el tema visual o artículos en un carrito de compras. Mejora la experiencia del usuario adaptando el sitio a sus preferencias.

Ejemplos: Guardar el modo oscuro en YouTube, recordar el idioma en Netflix o mantener productos en el carrito de Mercado Libre aunque cierres la página.
Seguimiento y Analítica: Entender el comportamiento del usuario para mejorar la experiencia de navegación o para fines publicitarios (siempre bajo normativas como GDPR). Permite analizar y optimizar el uso del sitio web.

Ejemplos: Google Analytics registrando visitas, Facebook Pixel midiendo conversiones o ver recomendaciones personalizadas en Spotify basadas en tu actividad.

2. Principales características

2.1. Almacenamiento en formato clave=valor

Las cookies guardan datos como pares simples:

// Ejemplo básico de cookie
document.cookie = "usuario=Manuel";Lenguaje del código: JavaScript (javascript)

Siempre se almacenan como strings
No soportan directamente objetos o arrays
Se requiere conversión manual (por ejemplo, JSON)

2.2. Tamaño limitado

Cada cookie tiene un límite aproximado de 4KB
El navegador también limita la cantidad total de cookies por dominio

👉 Esto implica que:

No son adecuadas para grandes volúmenes de datos
Se deben usar solo para información esencial

2.3. Persistencia configurable (expiración)

Las cookies pueden ser:

De sesión: se eliminan al cerrar el navegador
Persistentes: se mantienen hasta una fecha específica

// Cookie persistente por 7 días
document.cookie = "tema=oscuro; max-age=604800";Lenguaje del código: JavaScript (javascript)

2.4. Envío automático al servidor

Una de sus características más importantes:

Las cookies se envían automáticamente en cada petición HTTP

👉 Esto permite:

Mantener sesiones activas
Identificar usuarios sin intervención manual

2.5. Alcance definido por dominio y ruta

Las cookies pueden restringirse mediante:

domain: define en qué dominio están disponibles
path: limita en qué rutas se envían

document.cookie = "usuario=Manuel; path=/perfil";Lenguaje del código: JavaScript (javascript)

2.6. Opciones de seguridad

Las cookies pueden configurarse con atributos de seguridad:

Secure: solo se envía en HTTPS
SameSite: protege contra ataques CSRF
HttpOnly: evita acceso desde JavaScript (solo servidor)

document.cookie = "token=abc123; Secure; SameSite=Strict";Lenguaje del código: JavaScript (javascript)

2.7. Se pueden crear, leer, actualizar y eliminar

Desde JavaScript podés gestionar cookies completamente:

// Crear
document.cookie = "idioma=es";

// Leer
console.log(document.cookie);

// Actualizar
document.cookie = "idioma=en";

// Eliminar
document.cookie = "idioma=; max-age=0";Lenguaje del código: JavaScript (javascript)

2.8. Acceso mediante `document.cookie`

Es la única interfaz nativa en JavaScript para cookies
Devuelve todas las cookies en un solo string

// Ejemplo de múltiples cookies
"usuario=Manuel; tema=oscuro"Lenguaje del código: JSON / JSON con comentarios (json)

Requiere procesamiento manual para trabajar con ellas

2.9. Limitaciones importantes

No son seguras para datos sensibles
Impactan el rendimiento (viajan en cada request)
No permiten estructuras complejas directamente

3. ¿Cómo funcionan las cookies exactamente?

Para entender cómo funcionan exactamente las cookies, hay que verlas como un mecanismo de comunicación continua entre tu navegador (cliente) y el servidor web.

Aquí te explico el proceso técnico paso a paso:

3.1. Solicitud HTTP

Cuando escribes una URL en tu navegador, este envía una solicitud al servidor. En este punto, si es tu primera vez en el sitio, el navegador no tiene ninguna información guardada para ese dominio.

3.2. La respuesta del servidor (`Set-Cookie`)

El servidor recibe tu solicitud y decide que necesita «reconocerte» en el futuro. Entonces, envía de vuelta la página web junto con una cabecera especial llamada Set-Cookie.

Ejemplo de cabecera: Set-Cookie: user_id=12345; Max-Age=3600; Secure.

3.3. Almacenamiento local

Tu navegador recibe esa cabecera, extrae los datos y los guarda en un archivo pequeño dentro de tu disco duro o memoria. A partir de este momento, esa información queda vinculada al dominio específico (por ejemplo, google.com).

3.4. El envío automático en cada petición

Aquí ocurre la magia: cada vez que hagas clic en un enlace, cargues una imagen o refresques la página de ese mismo sitio, el navegador adjunta automáticamente todas las cookies guardadas para ese dominio en la cabecera de la solicitud.

El servidor lee la cookie, reconoce quién eres (por ejemplo, mantiene tu sesión abierta) y te entrega contenido personalizado sin que tengas que volver a loguearte.

Los 3 estados clave de una cookie

Para que este flujo sea exacto y seguro, las cookies operan bajo estas reglas:

Ciclo de Vida:
- Cookies de sesión: Se borran al cerrar el navegador (no tienen fecha de expiración).
- Cookies persistentes: Tienen una fecha de vencimiento (Expires) o una duración (Max-Age) y sobreviven al reinicio del equipo.
Alcance (Scope): Mediante los atributos Domain y Path, la cookie decide en qué partes del sitio web es «visible».Una cookie creada para blog.tusitio.com puede no ser enviada a tienda.tusitio.com.
Seguridad: * HttpOnly: Es una bandera crucial que impide que JavaScript acceda a la cookie, protegiéndola de ataques de robo de datos (XSS).
- SameSite: Controla si la cookie se envía cuando vienes desde otro sitio web (para evitar ataques CSRF).

3.5. ¿Cómo funcionan? Ejemplo

Supongamos que queremos que cuando el usuario realice un cambio (como el Modo Oscuro) dicho cambio se mantenga reflejado en el tiempo sin que el usuario deba seleccionarlo en cada visita.

Para ello debemos seguir un flujo lógico de tres pasos con las cookies: Crear, Almacenar y Leer:

RECUERDA! Las cookies se pueden crear de tres formas: vía JavaScript directamente en tu código para guardar preferencias visuales rápidas, vía Servidor (HTTP) mediante cabeceras para manejar sesiones y datos sensibles de forma segura, o mediante scripts de terceros (como Google Analytics) para medir estadísticas y marketing.
Aquí nos enfocamos en la vía JavaScript

Cuando el usuario interactúa con tu página (por ejemplo, hace clic en un botón de «Modo Oscuro»), tu script debe realizar dos acciones: cambiar visualmente el sitio y guardar esa instrucción en el navegador.

Para crear la cookie usamos la propiedad document.cookie. Es fundamental añadir un atributo de expiración (max-age) para que el dato no se borre al cerrar el navegador.

// Función para activar modo oscuro y guardar la cookie
function activarModoOscuro() {
    // 1. Cambio visual en el DOM
    document.body.classList.add('dark-mode');

    // 2. Crear la cookie (Nombre=Valor; Tiempo de vida en segundos; Ruta)
    // 31536000 segundos equivalen a 1 año
    document.cookie = "tema=oscuro; max-age=31536000; path=/; SameSite=Lax";
}Lenguaje del código: JavaScript (javascript)

3.5.2. El almacenamiento y el envío automático

Una vez que ejecutas ese código, el navegador guarda el archivo en la memoria de la computadora del usuario.

Lo más importante para tu servidor es lo siguiente: cada vez que el usuario regrese a tu dominio, el navegador adjuntará automáticamente esa cookie en la petición HTTP. Esto permite que el sistema sepa, antes de mostrar la página, que ese usuario prefiere el modo oscuro.

Para que la página «recuerde» la configuración apenas se abra, debemos crear una función que se ejecute al inicio del script. Esta función buscará la cookie y, si existe, aplicará los cambios antes de que el usuario vea el contenido.

// Función que corre al cargar la web
function aplicarPreferencia() {
    const todasLasCookies = document.cookie;
    
    // Comprobamos si la cookie "tema=oscuro" existe en el string
    if (todasLasCookies.includes("tema=oscuro")) {
        document.body.classList.add('dark-mode');
    }
}

// Ejecutar al cargar el DOM
document.addEventListener("DOMContentLoaded", aplicarPreferencia);Lenguaje del código: JavaScript (javascript)

EXPLICACIÓN DEL CÓDIGO:

1. La lógica de la función aplicarPreferencia()

const todasLasCookies = document.cookie;: Acá el script le pide al navegador que le entregue un solo texto largo con todas las cookies guardadas (algo como "idioma=es-AR; tema=oscuro; fuente=grande").
if (todasLasCookies.includes("tema=oscuro")): Usás el método .includes() para buscar si ese pedacito de texto específico existe dentro de la bolsa de cookies. Es como buscar una palabra en un párrafo.
document.body.classList.add('dark-mode');: Si la encontró, le «pega» una clase de CSS al cuerpo de la web. Se asume que en tu archivo CSS ya tenés definido que .dark-mode cambie los colores a oscuro.

2. El disparador (DOMContentLoaded)

document.addEventListener("DOMContentLoaded", ...): Este es un punto clave. Le dice al navegador: «No ejecutes esta función todavía; esperá a que el HTML esté descargado y procesado».
Sin esto, el script podría intentar cambiar el color del body antes de que el body siquiera exista, lo que daría un error.

3.5.4. Resumen del flujo técnico para tu proyecto

Acción del Usuario: El usuario elige su preferencia.
Script de JavaScript: Escribe la cookie en el navegador con document.cookie.
Persistencia: El navegador guarda el dato en el disco local.
Recuperación: En la próxima visita, el navegador envía la cookie; tu script la lee y aplica el estilo Modo Oscuro de forma automática.

NOTA!! Al usar nombres de cookies descriptivos (como user_theme_preference) y atributos de seguridad como SameSite, ayudas a que los motores de búsqueda y herramientas de análisis entiendan que tu sitio sigue estándares profesionales de desarrollo y privacidad.

4. Sintaxis para crear cookies en JavaScript

La forma básica de asignar una cookie es mediante la propiedad document.cookie. Aunque parece que estás reasignando un valor simple, en realidad estás añadiendo una nueva entrada a la lista de cookies del navegador.

4.1. `document.cookie` (Estructura general)

document.cookie = "nombre=valor; expires=fecha_UTC; max-age=segundos; path=ruta; domain=dominio; secure; samesite=strict";Lenguaje del código: JavaScript (javascript)

Explicación de los componentes:

Para que una cookie sea útil y segura, no basta con el par clave=valor. Debes configurar sus atributos opcionales:

Nombre y Valor (key=value):
- Es la única parte obligatoria.
- Ejemplo: "user_id=85".
- Nota: Se recomienda usar encodeURIComponent() para el valor si contiene espacios o caracteres especiales.
expires (Expiración):
- Define la fecha exacta en la que la cookie dejará de existir.
- Debe estar en formato UTC (ej. Tue, 19 Jan 2038 03:14:07 GMT).
- Si no se define, la cookie es «de sesión» y se borra al cerrar el navegador.
max-age (Edad máxima):
- Es la alternativa moderna a expires. Define la vida de la cookie en segundos desde el momento actual.
- Ejemplo: max-age=3600 (la cookie durará una hora).
path (Ruta):
- Indica en qué parte del sitio es válida la cookie.
- Si usas path=/, la cookie estará disponible en todo tu dominio.
secure:
- Es un flag de seguridad. Si se incluye, la cookie solo se enviará a través de conexiones seguras (HTTPS).
samesite:
- Controla si la cookie se envía en solicitudes de sitios cruzados. Los valores son Strict, Lax (por defecto en navegadores modernos) o None. Es vital para prevenir ataques CSRF.

Imagina que quieres guardar la preferencia de idioma de un usuario para que dure 30 días y sea accesible en toda tu web:

// Definimos los datos
const nombre = "idioma";
const valor = "es-AR";
const segundos = 60 * 60 * 24 * 30; // 30 días

// Construimos la cookie
document.cookie = `${nombre}=${valor}; max-age=${segundos}; path=/; samesite=lax`;

console.log("Cookie creada con éxito");Lenguaje del código: JavaScript (javascript)

Explicación de qué sucede paso a paso:

Definición de variables (nombre y valor): Estás creando una estructura clave-valor. En este caso, le estás diciendo al navegador: «Guardá que la preferencia de idioma es es-AR«.
Cálculo de tiempo (segundos): JavaScript no entiende de «meses» o «días» directamente en las cookies, por eso hacés la multiplicación. El resultado es la cantidad de segundos que hay en un mes.
Construcción con Template Literals (`${...}`): Estás usando una forma moderna de concatenar texto. Esto inserta tus variables dentro de la cadena final que el navegador necesita leer.
Atributos de la Cookie:
- max-age: Le da la «orden» al navegador de mantener ese archivo vivo durante el tiempo que calculaste. Sin esto, la cookie moriría al cerrar la pestaña.
- path=/: Es fundamental. Indica que la cookie está disponible en todas las secciones de tu sitio web. Si no lo ponés, a veces solo funciona en la carpeta donde se creó.
- samesite=lax: Esta es una medida de seguridad moderna. Le dice al navegador que no envíe esta cookie si el usuario viene desde un link de un sitio externo sospechoso, protegiendo la privacidad.

El resultado final: Cuando el usuario cierre el navegador y vuelva en 20 días, esa cookie seguirá ahí, permitiéndote leerla y mostrarle la web en español automáticamente.

ACLARACIÓN: Tambienn podemoss «implantar» la cookie escribiendo la cadena de texto completa directamente dentro de document.cookie de esta manera:

// Creamos la cookie directamente sin usar variables previas
document.cookie = "idioma=es-AR; max-age=2592000; path=/; samesite=lax";

console.log("Cookie creada directamente");Lenguaje del código: JavaScript (javascript)

Explicación de esta variante:

Todo en una cadena: En lugar de usar ${variable}, escribís el texto plano "nombre=valor". Es lo que el navegador recibe finalmente de todas formas.
Valor fijo de tiempo: En lugar de hacer la cuenta 60*60..., ponés el resultado directo en segundos (2592000 equivalen a 30 días).
Cuándo usarlo: Esta opción es ideal cuando los valores son estáticos (no cambian). Las variables que usamos antes son mejores si, por ejemplo, el valor dependiera de algo que el usuario escribió en un formulario.

5. Leer cookies

5.1. ¿Qué significa leer cookies y por qué es necesario?

Leer cookies es el proceso de acceder al almacenamiento del navegador para recuperar la información que fue guardada previamente (ya sea por un script de JavaScript o por el servidor).

Es una operación necesaria por tres razones fundamentales:

Personalización inmediata:
- Permite que, al cargar la página, el sitio sepa si debe mostrar el «Modo Oscuro», qué idioma cargar o qué nombre de usuario mostrar.
Mantenimiento de Estado:
- Ayuda a saber si un usuario tiene una sesión activa o si dejó productos pendientes en un carrito de compra.
Lógica Condicional:
- Es la base para decidir si ejecutar ciertas funciones o no (por ejemplo, no mostrar un pop-up de oferta si la cookie indica que el usuario ya lo cerró).

5.2. ¿Cómo leer cookies con JavaScript?

A diferencia de otras APIs modernas (como localStorage), las cookies no nos entregan los datos de forma organizada. Aquí es donde entra el parsing manual.

5.2.1. El acceso mediante `document.cookie`

Cuando escribes document.cookie en la consola, el navegador te devuelve una sola cadena de texto (string) que contiene todas las cookies del dominio separadas por punto y coma (;).

Formato recibido: "preferencia=oscuro; usuario=Alex; login=true"

5.2.2. El desafío del Parsing Manual

Como recibimos un string largo y no un objeto, debemos «limpiar» y separar la información para encontrar lo que buscamos. El proceso estándar sigue estos pasos:

Paso	Método de JavaScript	Propósito
1. Obtener cadena	`document.cookie`	Traer todos los datos crudos.
2. Fragmentar	`.split('; ')`	Convertir el string en un Array de cookies individuales.
3. Buscar	`.find()` o `.filter()`	Localizar la cookie específica por su nombre.
4. Extraer valor	`.split('=')[1]`	Separar el nombre del valor real que necesitamos.

Para no repetir este proceso manualmente cada vez, los desarrolladores expertos crean una función Helper. Aquí tienes el código optimizado:

/**
 * Obtiene el valor de una cookie específica por su nombre.
 * @param {string} nombre - El nombre de la cookie a buscar.
 * @returns {string|null} - El valor de la cookie o null si no existe.
 */
function obtenerCookie(nombre) {
    // 1. Obtenemos todas las cookies y las dividimos en un array
    const listaCookies = document.cookie.split('; ');

    // 2. Buscamos la cookie que empiece con el nombre solicitado
    const cookieEncontrada = listaCookies.find(fila => fila.startsWith(nombre + '='));

    // 3. Si existe, extraemos el valor después del signo "="
    if (cookieEncontrada) {
        const valor = cookieEncontrada.split('=')[1];
        return decodeURIComponent(valor); // Decodificamos por seguridad
    }

    return null; // Si no se encuentra, devolvemos null
}

// Ejemplo de uso:
const temaActual = obtenerCookie("tema");
console.log("El tema guardado es:", temaActual);
Lenguaje del código: JavaScript (javascript)

5.3. Consideraciones de seguridad y buenas prácticas

decodeURIComponent: Siempre usa esta función al leer valores, ya que las cookies suelen codificar caracteres especiales (como espacios o tildes) para ser transportadas en HTTP. Permite decodificar correctamente los valores almacenados en cookies.

Ejemplos: Decodificar «nombre=Juan%20P%C3%A9rez» a «Juan Pérez», leer correctamente un valor con acentos como «informaci%C3%B3n» o interpretar espacios representados como «%20».
Cookies HttpOnly: Ten en cuenta que si una cookie fue creada con la bandera HttpOnly desde el servidor, JavaScript no podrá leerla. Esto es una medida de seguridad contra ataques XSS.

Ejemplos: Cookies de sesión en bancos online, tokens de autenticación protegidos en aplicaciones como Gmail o cookies de login que solo el servidor puede validar.
Alternativas modernas: Para proyectos muy nuevos, existe la Cookie Store API (window.cookieStore), que permite leer cookies de forma asíncrona mediante Promesas, aunque su soporte en navegadores antiguos es limitado. Ofrece una forma más moderna y eficiente de trabajar con cookies.

Ejemplos: Usar cookieStore.get('usuario') en aplicaciones modernas, gestionar cookies en Progressive Web Apps (PWA) o integrar almacenamiento asíncrono en proyectos con Service Workers.

Esta estructura no solo ayuda a tus alumnos a entender el «cómo», sino también el «por qué» detrás de la manipulación de strings en JavaScript, lo cual es un concepto clave en cualquier entrevista técnica de programación.

6. Actualizar cookies existentes

En el ecosistema de JavaScript, no existe un método update o edit para las cookies. Actualizar una cookie significa, técnicamente, sobrescribirla.

Cuando asignas un nuevo valor a una cookie que ya existe (utilizando el mismo nombre, path y domain), el navegador reemplaza el valor antiguo y los atributos anteriores por los nuevos que estés declarando en ese momento.

6.2. ¿Por qué es necesario hacerlo?

La actualización es una pieza clave para mantener la relevancia de la aplicación:

Cambio de preferencias: Si el usuario decide cambiar de «Modo Oscuro» a «Modo Claro», debes actualizar el valor de la cookie tema.
Extender la sesión: Si el usuario sigue activo, puedes actualizar el atributo max-age o expires para evitar que la cookie caduque mientras la persona usa la web.
Actualización de datos temporales: Por ejemplo, actualizar el contador de visitas o el último producto visto en un carrusel.

6.3. ¿Cómo se hace? (El proceso técnico)

Para actualizar con éxito, debes declarar la cookie nuevamente usando document.cookie. Es vital que los atributos de identificación (nombre, path y domain) coincidan exactamente con la original; de lo contrario, crearás una cookie nueva en lugar de actualizar la existente.

Ejemplo 1: Cambio de valor simple

Supongamos que el usuario cambia su idioma de preferencia.

// Cookie original: "idioma=es; path=/"
// Actualización:
document.cookie = "idioma=en; path=/; max-age=31536000"; 
Lenguaje del código: JavaScript (javascript)

Ejemplo 2: Función profesional de actualización

Para tu tutorial, lo ideal es mostrar una función que maneje esto de forma dinámica:

/**
 * Actualiza una cookie existente o la crea si no existe.
 */
function actualizarCookie(nombre, nuevoValor, diasParaExpirar) {
    const segundos = diasParaExpirar * 24 * 60 * 60;
    
    // Al usar el mismo nombre y path, el navegador sobrescribe la anterior
    document.cookie = `${nombre}=${encodeURIComponent(nuevoValor)}; max-age=${segundos}; path=/; samesite=lax`;
    
    console.log(`Cookie '${nombre}' actualizada con el valor: ${nuevoValor}`);
}

// Uso:
actualizarCookie("tema", "claro", 30);Lenguaje del código: JavaScript (javascript)

6.4. Errores comunes al actualizar (Guía para evitar fallos)

Olvidar el path:
- Si la cookie original se creó con path=/ y tú intentas actualizarla sin especificar la ruta, es probable que el navegador cree una segunda cookie válida solo para la carpeta actual, generando conflictos de lectura.
Confundir expires con max-age:
- Aunque ambos sirven para lo mismo, si quieres «resetear» el tiempo de vida al actualizar, asegúrate de enviar el nuevo valor de expiración, o de lo contrario la cookie podría heredar el tiempo de vida corto que le quedaba a la anterior (dependiendo del navegador).
Sensibilidad a mayúsculas:
- El nombre Tema es distinto a tema. Para el navegador, son dos cookies totalmente diferentes.

NOTA!! Siempre que actualices una cookie que contenga datos sensibles, recuerda volver a incluir los atributos de seguridad como Secure o SameSite. Al sobrescribir, si omites estos flags, la nueva versión de la cookie podría perder esas capas de protección.

7. Eliminar cookies en JavaScript

Técnicamente, los navegadores no tienen un comando delete para las cookies. Eliminar una cookie significa forzar su expiración inmediata.

Para lograr esto, se sobrescribe la cookie existente con el mismo nombre, pero estableciendo una fecha de vencimiento que ya pasó (una fecha en el pasado) o configurando su tiempo de vida en cero segundos. Al detectar que la cookie ha «caducado», el navegador la borra automáticamente de su memoria.

7.2. ¿De qué sirve?

Como desarrollador web, la eliminación de cookies es una herramienta esencial para:

Cerrar Sesiones (Logout): Es el uso más común. Cuando un usuario hace clic en «Cerrar sesión», debes eliminar la cookie que contiene su token de acceso para que nadie más pueda usar esa cuenta en ese dispositivo.
Resetear Preferencias: Si el usuario desea restaurar los valores de fábrica de tu web o limpiar su historial de configuración.
Seguridad y Privacidad: Eliminar datos sensibles una vez que ya no son necesarios reduce el riesgo de que sean robados por scripts maliciosos.
Cumplimiento Legal: Permitir que el usuario revoque su consentimiento (por ejemplo, si decide que ya no quiere que rastrees su actividad).

7.3. ¿Cómo se hace?

Para eliminar una cookie de forma efectiva, debes cumplir con una regla de oro: usar el mismo nombre, path (ruta) y domain (dominio) que usaste al crearla.

Existen dos métodos principales para «matar» una cookie:

Método A: Usando `max-age=0` (El más moderno y sencillo)

Al establecer el tiempo de vida en 0 segundos, la cookie desaparece al instante.

// Eliminar la cookie "tema"
document.cookie = "tema=; max-age=0; path=/";Lenguaje del código: JavaScript (javascript)

Método B: Usando `expires` con una fecha pasada

Se le asigna una fecha antigua (por convención, el inicio del tiempo Unix: 1 de enero de 1970).

// Eliminar la cookie "usuario"
document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/";Lenguaje del código: JavaScript (javascript)

Función profesional para borrar cookies

/**
 * Elimina una cookie específica por su nombre.
 * @param {string} nombre - El nombre de la cookie a borrar.
 */
function borrarCookie(nombre) {
    // Sobrescribimos la cookie con valor vacío y max-age en 0
    // IMPORTANTE: El path debe coincidir con el usado al crearla (usualmente '/')
    document.cookie = nombre + "=; max-age=0; path=/; samesite=lax";
    
    console.log(`La cookie '${nombre}' ha sido eliminada.`);
}

// Escenario de uso: Botón de cerrar sesión
document.getElementById('btn-logout').onclick = function() {
    borrarCookie("session_token");
    borrarCookie("user_id");
    location.reload(); // Recargamos para que los cambios surtan efecto en la UI
};Lenguaje del código: JavaScript (javascript)

Aclaración:

El valor no importa: Al eliminar, puedes dejar el valor vacío (nombre=;), ya que lo único que el navegador procesa es la instrucción de expiración.
Cuidado con el Path: Si creaste una cookie en path=/admin e intentas borrarla desde la raíz con path=/, la cookie no se borrará. Los atributos deben ser idénticos.
Visibilidad: Una vez borrada, si intentas hacer un console.log(document.cookie), verás que esa clave ya no aparece en el string resultante.

8. Atributos esenciales

Los atributos de las cookies permiten controlar su duración, alcance y comportamiento. Entenderlos es clave para usar cookies correctamente en aplicaciones web reales con el DOM.

8.1. `expires` (fecha exacta de expiración)

Define hasta qué fecha exacta la cookie será válida. Después de esa fecha, el navegador la elimina automáticamente.

¿Cómo se usa?

// Cookie que expira en una fecha específica
document.cookie = "usuario=Manuel; expires=Fri, 31 Dec 2026 23:59:59 UTC; path=/";Lenguaje del código: JavaScript (javascript)

Cuándo usarlo:

Cuando necesitás una fecha fija (ej: fin de promoción, vencimiento legal)

8.2. `max-age` (duración en segundos)

Define cuánto tiempo dura la cookie desde el momento en que se crea.

¿Cómo se usa?

// Cookie que dura 7 días (en segundos)
document.cookie = "tema=oscuro; max-age=604800; path=/";Lenguaje del código: JavaScript (javascript)

Cuándo usarlo

Para controlar duración relativa (más práctico en la mayoría de casos)

⚠️ Diferencia clave con expires

expires → fecha exacta
max-age → duración en segundos

Si usás ambos, max-age tiene prioridad.

8.3. `path` (ruta de acceso)

Define en qué rutas del sitio la cookie estará disponible.

¿Cómo se usa?

// Disponible en todo el sitio
document.cookie = "usuario=Manuel; path=/";Lenguaje del código: JavaScript (javascript)

// Solo disponible en /perfil
document.cookie = "usuario=Manuel; path=/perfil";Lenguaje del código: JavaScript (javascript)

Cuándo usarlo

path=/ → uso global (recomendado)
rutas específicas → cuando querés limitar el acceso

8.4. `domain` (dominio de acceso)

Define en qué dominio (o subdominios) la cookie será válida.

¿Cómo se usa?

// Disponible en todo el dominio y subdominios
document.cookie = "usuario=Manuel; domain=midominio.com; path=/";Lenguaje del código: JavaScript (javascript)

Ejemplo práctico

domain=midominio.com
👉 accesible desde:
- www.midominio.com
- app.midominio.com

⚠️ Importante

Si no se define, la cookie queda limitada al dominio actual
Mal configurado → puede hacer que la cookie no funcione

8.5. Ejemplo completo combinando atributos

// Cookie completa con atributos esenciales
document.cookie = "idioma=es; max-age=604800; path=/; domain=midominio.com";Lenguaje del código: JavaScript (javascript)

Esto define:

Valor: es
Duración: 7 días
Acceso: todo el sitio
Dominio: todo el dominio y subdominios

8.6. Errores comunes

// ❌ Olvidar path puede limitar la cookie
document.cookie = "usuario=Manuel";

// ❌ Usar mal expires (formato incorrecto)
document.cookie = "usuario=Manuel; expires=mañana";

// ❌ domain incorrecto
document.cookie = "usuario=Manuel; domain=otrodominio.com";Lenguaje del código: JavaScript (javascript)

8.7. Buenas prácticas

Usar max-age en lugar de expires (más claro y moderno)
Definir siempre path=/ para evitar problemas
Usar domain solo si realmente lo necesitás
Mantener consistencia al crear, actualizar y eliminar cookies

8.8. Conclusión

Los atributos expires, max-age, path y domain son esenciales para controlar cuánto dura una cookie y dónde se puede usar. Dominar estos conceptos te permite manejar cookies de forma profesional, evitando errores comunes y mejorando la arquitectura de tus aplicaciones web.

9. Ejemplo: Usando cookies con JS

Supongamos que tenemos una página web y, al entrar, al usuario le aparece un banner de consentimiento. Este es el típico aviso legal que pregunta si el usuario acepta el uso de cookies, con dos botones principales: «Aceptar» y «Rechazar».

Nuestro objetivo técnico es el siguiente: una vez que el usuario haga clic en «Aceptar», el banner debe desaparecer inmediatamente. Además, queremos que en sus próximas visitas el banner no vuelva a mostrarse, logrando que el navegador «recuerde» esa decisión. Para esto, vincularemos un script a nuestra página que gestione una cookie específica.

9.1. El HTML: Creando la interfaz del banner

Primero, necesitamos el elemento visual en nuestro archivo HTML. Este bloque contiene el mensaje y el botón que disparará nuestra función de JavaScript.

<div id="cookie-banner" style="position: fixed; bottom: 0; width: 100%; background: #333; color: #fff; padding: 20px; text-align: center;">
    <p>Utilizamos cookies para mejorar tu experiencia en Apinem. ¿Aceptas?</p>
    <button onclick="aceptarCookies()" style="padding: 10px 20px; cursor: pointer;">Aceptar</button>
    <button style="padding: 10px 20px; cursor: pointer; background: transparent; color: white; border: 1px solid white;">Rechazar</button>
</div>Lenguaje del código: HTML, XML (xml)

Para que el navegador guarde la acción del usuario, creamos la cookie dentro de nuestro archivo de script. La cookie actúa como una marca persistente en la memoria del dispositivo del usuario.

function aceptarCookies() {
    // 1. Ocultamos el banner del DOM inmediatamente
    document.getElementById('cookie-banner').style.display = 'none';

    // 2. Creamos la cookie de consentimiento
    // Nombre: 'cookies_aceptadas' | Valor: 'true' | Duración: 1 año (31536000 seg)
    document.cookie = "cookies_aceptadas=true; max-age=31536000; path=/; samesite=lax";
    
    console.log("Preferencia guardada en el navegador.");
}Lenguaje del código: JavaScript (javascript)

¿Por qué lo creamos así? Al ejecutar document.cookie, le estamos pidiendo al navegador que almacene un pequeño archivo de texto. Al incluir path=/, aseguramos que esta «memoria» sea válida para todas las páginas de nuestro dominio, no solo para la actual.

9.3. Leer la cookie: La función de verificación.

Para que en la próxima visita el banner no aparezca, debemos crear una función de verificación. Aunque a veces decimos que «el servidor recuerda», técnicamente es el navegador quien, al realizar la petición HTTP, le envía la cookie al servidor. Luego, nuestro script lee esa información para decidir si muestra el banner o no.

// Esta función se ejecuta apenas carga la página
function verificarEstadoCookies() {
    // Leemos todas las cookies del navegador
    const cookies = document.cookie;

    // Buscamos si nuestra cookie específica ya existe
    if (cookies.includes("cookies_aceptadas=true")) {
        // Si existe, el usuario ya aceptó; ocultamos el banner antes de que se vea
        document.getElementById('cookie-banner').style.display = 'none';
    }
}

// Ejecutamos la verificación al cargar el documento
window.onload = verificarEstadoCookies;Lenguaje del código: JavaScript (javascript)

¿Por qué creamos esta función y cómo funciona?

Creamos esta función para automatizar la experiencia de usuario (UX). Funciona de la siguiente manera:

Detección:
- En el milisegundo en que la página carga, el script inspecciona la propiedad document.cookie.
Lógica condicional:
- Si la cadena de texto "cookies_aceptadas=true" está presente, el script entiende que el usuario ya pasó por este proceso anteriormente.
Manipulación silenciosa:
- El script modifica el estilo del banner a display: none.

Gracias a este flujo, el usuario siente que el sitio es inteligente y respeta sus decisiones previas.

10. Buenas prácticas

Aplicar buenas prácticas al trabajar con cookies en JavaScript es fundamental para crear aplicaciones web seguras, eficientes y escalables.

10.1. Guardar solo datos esenciales

Las cookies tienen un límite de tamaño (~4KB), por lo que es importante:

Almacenar únicamente información necesaria
Evitar datos redundantes o innecesarios
No usar cookies como base de datos

// ✔️ Correcto: dato simple
document.cookie = "tema=oscuro; path=/";

// ❌ Incorrecto: demasiada información
document.cookie = "datosUsuario={nombre:'Manuel', edad:25, preferencias:{...}}";Lenguaje del código: JavaScript (javascript)

10.2. No almacenar información sensible

Las cookies pueden ser vulnerables si no se configuran correctamente.

Evitar guardar:

Contraseñas
Tokens sin protección
Datos personales críticos

// ❌ Nunca hacer esto
document.cookie = "password=123456";Lenguaje del código: JavaScript (javascript)

Para datos sensibles, usar cookies con HttpOnly desde el servidor.

10.3. Definir correctamente la expiración

Controlar cuánto tiempo vive una cookie es clave para:

Seguridad
Rendimiento
Experiencia de usuario

// ✔️ Cookie con duración controlada (7 días)
document.cookie = "idioma=es; max-age=604800; path=/";Lenguaje del código: JavaScript (javascript)

👉 Preferir max-age sobre expires.

10.4. Usar siempre `path=/`

Esto asegura que la cookie esté disponible en todo el sitio:

// ✔️ Recomendado
document.cookie = "usuario=Manuel; path=/";Lenguaje del código: JavaScript (javascript)

Evita errores donde la cookie no está accesible en ciertas rutas.

10.5. Crear funciones reutilizables (helpers)

Centralizar la lógica mejora la escalabilidad:

// Helper para crear cookies
function setCookie(nombre, valor, dias) {
  const segundos = dias * 24 * 60 * 60;
  document.cookie = `${nombre}=${valor}; max-age=${segundos}; path=/`;
}

// Helper para leer cookies
function getCookie(nombre) {
  const cookies = document.cookie.split("; ");
  
  for (let c of cookies) {
    const [clave, valor] = c.split("=");
    if (clave === nombre) return valor;
  }
}Lenguaje del código: JavaScript (javascript)

Código más limpio y profesional.

10.6. Mantener consistencia en atributos

Siempre usar los mismos atributos al:

Crear
Actualizar
Eliminar

// ✔️ Consistente
document.cookie = "usuario=Manuel; path=/";
document.cookie = "usuario=Pedro; path=/";
document.cookie = "usuario=; max-age=0; path=/";Lenguaje del código: JavaScript (javascript)

Evita duplicados o errores difíciles de detectar.

10.7. Minimizar el impacto en rendimiento

Recordá que:

Las cookies se envían en cada request HTTP
Muchas cookies → más peso en cada petición

Recomendación:

Usar cookies solo cuando sea necesario
Para datos locales, preferir localStorage

10.8. Configurar seguridad correctamente

Siempre que sea posible:

// Cookie más segura
document.cookie = "token=abc123; Secure; SameSite=Strict; path=/";Lenguaje del código: JavaScript (javascript)

Secure → solo HTTPS
SameSite → evita ataques CSRF

10.9. Codificar valores correctamente

Evitar errores con caracteres especiales:

// Codificar
document.cookie = "nombre=" + encodeURIComponent("Juan Pérez") + "; path=/";

// Decodificar
decodeURIComponent("Juan%20P%C3%A9rez");Lenguaje del código: JavaScript (javascript)

11. Diferencia entre cookies y Web Storage

Entender la diferencia entre cookies y Web Storage (localStorage y sessionStorage) es clave para elegir la mejor opción al almacenar datos en el navegador. Aunque ambos permiten persistir información en el cliente, su funcionamiento, alcance y uso práctico son muy distintos.

✅LAS cookies:

Como ya dijimos en todo este artículo, las cookies son pequeños fragmentos de datos que se almacenan en el navegador y se envían automáticamente al servidor en cada petición HTTP.

Se utilizan principalmente para:

Autenticación (sesiones)
Seguimiento de usuarios
Preferencias simples

✅LAS Web Storage

Web Storage incluye:

localStorage → almacenamiento persistente
sessionStorage → almacenamiento temporal (hasta cerrar la pestaña)

A diferencia de las cookies:

No se envían al servidor
Solo se usan del lado del cliente

👇COMPARACIÓNES CALVES (cookies vs Web Storage)

11.1. Comunicación con el servidor

Cookies → se envían automáticamente en cada request
Web Storage → no se envía, solo accesible desde JavaScript

Impacto:

Cookies → más carga en cada petición
Web Storage → mejor rendimiento

11.2. Capacidad de almacenamiento

Cookies → ~4KB por cookie
Web Storage → ~5MB por dominio

Web Storage es ideal para más datos.

11.3. Persistencia

Cookies → configurable (expires, max-age)
localStorage → persiste hasta que se borra manualmente
sessionStorage → se elimina al cerrar la pestaña

11.4. Acceso desde JavaScript

Cookies → document.cookie (string, requiere parsing)
Web Storage → API sencilla tipo objeto

// localStorage
localStorage.setItem("usuario", "Manuel");
const usuario = localStorage.getItem("usuario");

// Cookies
document.cookie = "usuario=Manuel";Lenguaje del código: JavaScript (javascript)

11.5. Seguridad

Cookies → pueden ser más seguras con HttpOnly, Secure, SameSite
Web Storage → vulnerable a XSS si no se protege bien

Cookies son mejores para autenticación (con backend).

11.6. Facilidad de uso

Cookies → más complejas (string + parsing)
Web Storage → más simple y directa

11.7. Ejemplo práctico comparativo

Guardar tema con cookies

document.cookie = "tema=oscuro; max-age=604800; path=/";Lenguaje del código: JavaScript (javascript)

Guardar tema con localStorage

localStorage.setItem("tema", "oscuro");Lenguaje del código: JavaScript (javascript)

Con localStorage no necesitás parsing ni configuración extra.

11.8. ¿Cuándo usar cada uno?

Usar cookies cuando:

Necesitás enviar datos al servidor
Manejas autenticación/sesiones
Requerís control avanzado de seguridad

Usar Web Storage cuando:

Solo trabajás en el cliente (DOM)
Guardás preferencias o estado UI
Necesitás más capacidad y simplicidad

11.9. Error común

// ❌ Usar cookies para todo
document.cookie = "datosApp=...";

// ✔️ Mejor opción
localStorage.setItem("datosApp", JSON.stringify(data));Lenguaje del código: JavaScript (javascript)

11.10. Conclusión

La diferencia entre cookies y Web Storage radica en su propósito:

Cookies → comunicación cliente-servidor
Web Storage → almacenamiento local eficiente

Elegir correctamente mejora el rendimiento, la seguridad y la arquitectura de tu aplicación.

Cookies en JavaScript

Índice

1. Introducción a las cookies

1.1. ¿Qué son las cookies en JavaScript?

1.2. Componentes clave

1.3. ¿Para que sirven?

2. Principales características

2.1. Almacenamiento en formato clave=valor

2.2. Tamaño limitado

2.3. Persistencia configurable (expiración)

2.4. Envío automático al servidor

2.5. Alcance definido por dominio y ruta

2.6. Opciones de seguridad

2.7. Se pueden crear, leer, actualizar y eliminar

2.8. Acceso mediante document.cookie

2.9. Limitaciones importantes

3. ¿Cómo funcionan las cookies exactamente?

3.1. Solicitud HTTP

3.2. La respuesta del servidor (Set-Cookie)

3.3. Almacenamiento local

3.4. El envío automático en cada petición

3.5. ¿Cómo funcionan? Ejemplo

3.5.1. Capturar la preferencia y Crear la Cookie

3.5.2. El almacenamiento y el envío automático

3.5.3. Leer la Cookie al cargar la página (Persistencia)

3.5.4. Resumen del flujo técnico para tu proyecto

4. Sintaxis para crear cookies en JavaScript

4.1. document.cookie (Estructura general)

4.2. Ejemplo práctico:

5. Leer cookies

5.1. ¿Qué significa leer cookies y por qué es necesario?

5.2. ¿Cómo leer cookies con JavaScript?

5.2.1. El acceso mediante document.cookie

5.2.2. El desafío del Parsing Manual

5.2.3. Función profesional para buscar una cookie por nombre

5.3. Consideraciones de seguridad y buenas prácticas

6. Actualizar cookies existentes

6.1. ¿Qué significa actualizar una cookie?

6.2. ¿Por qué es necesario hacerlo?

6.3. ¿Cómo se hace? (El proceso técnico)

Ejemplo 1: Cambio de valor simple

Ejemplo 2: Función profesional de actualización

6.4. Errores comunes al actualizar (Guía para evitar fallos)

7. Eliminar cookies en JavaScript

7.1. ¿Qué significa eliminar una cookie?

7.2. ¿De qué sirve?

7.3. ¿Cómo se hace?

Método A: Usando max-age=0 (El más moderno y sencillo)

Método B: Usando expires con una fecha pasada

Función profesional para borrar cookies

8. Atributos esenciales

8.1. expires (fecha exacta de expiración)

8.2. max-age (duración en segundos)

8.3. path (ruta de acceso)

8.4. domain (dominio de acceso)

8.5. Ejemplo completo combinando atributos

8.6. Errores comunes

8.7. Buenas prácticas

8.8. Conclusión

9. Ejemplo: Usando cookies con JS

9.1. El HTML: Creando la interfaz del banner

9.2. Creando la Cookie: ¿Cómo se guarda la decisión?

9.3. Leer la cookie: La función de verificación.

10. Buenas prácticas

10.1. Guardar solo datos esenciales

10.2. No almacenar información sensible

10.3. Definir correctamente la expiración

10.4. Usar siempre path=/

10.5. Crear funciones reutilizables (helpers)

10.6. Mantener consistencia en atributos

10.7. Minimizar el impacto en rendimiento

10.8. Configurar seguridad correctamente

10.9. Codificar valores correctamente

11. Diferencia entre cookies y Web Storage

11.1. Comunicación con el servidor

11.2. Capacidad de almacenamiento

11.3. Persistencia

11.4. Acceso desde JavaScript

11.5. Seguridad

11.6. Facilidad de uso

2.8. Acceso mediante `document.cookie`

3.2. La respuesta del servidor (`Set-Cookie`)

4.1. `document.cookie` (Estructura general)

5.2.1. El acceso mediante `document.cookie`

Método A: Usando `max-age=0` (El más moderno y sencillo)

Método B: Usando `expires` con una fecha pasada

8.1. `expires` (fecha exacta de expiración)

8.2. `max-age` (duración en segundos)

8.3. `path` (ruta de acceso)

8.4. `domain` (dominio de acceso)

10.4. Usar siempre `path=/`