Cookies: document.cookie

Las cookies son pequeñas porciones de datos (máximo ~4 KB cada una) que un sitio almacena en el navegador y que se adjuntan automáticamente a cada solicitud enviada al mismo origen. Ese último punto es lo que las diferencia de otros almacenamientos del lado del cliente: las cookies viajan al servidor, por lo que son el mecanismo clásico para identificadores de sesión, tokens de "recordarme" y preferencias de idioma o tema que el servidor necesita conocer. Esta guía explica cómo leer, escribir y eliminar cookies con document.cookie, los atributos que controlan su alcance y tiempo de vida, y cuándo conviene recurrir a una opción de almacenamiento diferente.

Cómo funciona document.cookie

document.cookie es una propiedad engañosamente simple. Leerla devuelve todas las cookies del documento actual como una cadena de texto separada por punto y coma con pares name=value. Escribir en ella establece una cookie a la vez — y, lo que es crucial, asignarle un valor no sobreescribe toda la cadena. El navegador analiza la asignación y combina esa única cookie con el conjunto existente:

// Reading: returns everything as one string
document.cookie; // "theme=dark; lang=en; sessionId=abc123"

// Writing: adds/updates ONE cookie, leaves the rest intact
document.cookie = "username=John";

Los atributos que se añaden (path, expires, Secure, …) son de solo escritura — configuran la cookie pero nunca se devuelven al leer document.cookie. Solo se recuperan los pares name=value.

Crear una cookie

Para crear una cookie, asigna una cadena name=value a document.cookie, seguida opcionalmente de atributos separados por ;. Si el valor contiene espacios, punto y coma u otros caracteres especiales, codifícalo con encodeURIComponent para evitar errores de análisis:

Esto crea una cookie llamada username con el valor John Doe (codificado para manejar el espacio), que expira el 8 de junio de 2025 y es accesible en todo el sitio (path=/).

Atributos de las cookies

Los atributos se añaden a la cadena de asignación y controlan dónde se envía la cookie y cuánto tiempo vive. Los más importantes:

Sin expires ni max-age, se obtiene una cookie de sesión que desaparece cuando se cierra el navegador.

Establecer una fecha de expiración

Usa expires para una fecha absoluta o max-age para un tiempo de vida relativo en segundos. max-age suele ser más fácil porque no hay que formatear una fecha:

Esta cookie userSettings expira 24 horas (86 400 segundos) después de crearse.

Leer una cookie específica

Como document.cookie devuelve todas las cookies en una sola cadena, obtener un valor individual requiere analizarla. Una función auxiliar robusta antepone ; a la cadena para que la misma división funcione tanto para la primera cookie como para cualquier otra:

Si necesitas recorrer todas las cookies, divide por ; y analiza cada par tú mismo:

Eliminar una cookie

No existe un comando «eliminar» — se elimina una cookie volviéndola a establecer con una fecha de expiración en el pasado (o max-age=0). El error que comete todo el mundo: debes usar el mismo path y domain con los que se creó la cookie; de lo contrario, el navegador la trata como una cookie diferente y deja la original intacta.

Establecer expires=Thu, 01 Jan 1970 00:00:00 UTC consigue lo mismo en los navegadores que prefieren expires a max-age.

Asegurar las cookies

Cuando una cookie contiene algo sensible (un token de sesión ante todo), los atributos importan tanto como el valor:

• Secure — envía la cookie solo a través de HTTPS, para que no pueda filtrarse a través de una conexión HTTP sin cifrar.
• SameSite — controla si la cookie se adjunta a solicitudes entre sitios. Lax (el valor predeterminado moderno) la bloquea en la mayoría de las solicitudes entre sitios, mitigando los ataques CSRF; Strict es la opción más restrictiva; None (que requiere Secure) es para casos de uso genuinamente entre sitios.
• HttpOnly — oculta la cookie de JavaScript por completo, protegiendo los tokens de sesión del robo mediante XSS. No se puede establecer desde document.cookie; el servidor debe enviarla a través del encabezado de respuesta Set-Cookie. Por eso las cookies de sesión suelen ser gestionadas por el servidor.

document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";

Cookies vs. localStorage

Las cookies no son la única opción de almacenamiento del lado del cliente, y para la mayoría de los datos no son la mejor. Usa cookies solo cuando el servidor necesite los datos en cada solicitud:

Si solo necesitas recordar algo en el cliente y el servidor nunca lo lee, localStorage o sessionStorage es más sencillo y tiene mayor capacidad; la Storage API lo cubre en profundidad. Dado que las cookies se envían automáticamente con las solicitudes, también interactúan con las reglas de CORS — consulta las solicitudes de origen cruzado con Fetch para enviar credenciales entre orígenes.

Conclusión

Las cookies siguen siendo la forma estándar de compartir pequeñas porciones de estado con el servidor — sesiones, autenticación y preferencias leídas por el servidor. Escríbelas de una en una con document.cookie, delimítalas con path/domain, controla su tiempo de vida con expires/max-age, y protégelas con Secure, SameSite y (en el servidor) HttpOnly. Para datos más grandes y solo del lado del cliente, prefiere Web Storage en su lugar.

Práctica