Las cookies permiten almacenar pequeñas cantidades de información en el navegador y recuperarlas posteriormente. Pueden utilizarse, por ejemplo, para recordar una preferencia del usuario, conservar determinadas opciones de una interfaz o mantener información necesaria para el funcionamiento de una aplicación.
Durante años era frecuente encontrar tutoriales para gestionar cookies “con jQuery”. Sin embargo, jQuery no es necesario para crear, leer o eliminar cookies. Podemos hacerlo directamente con JavaScript o utilizar una biblioteca ligera como js-cookie.
En este artículo veremos ambos métodos y qué atributos debemos tener en cuenta al trabajar con cookies actualmente.
¿Qué es una cookie?
Una cookie es un pequeño dato que el navegador almacena asociado a un sitio web.
Normalmente contiene un nombre y un valor, aunque también puede incorporar atributos que determinan su duración, dónde está disponible o bajo qué condiciones debe enviarse.
Por ejemplo, podríamos utilizar una cookie para recordar que un usuario ha seleccionado un determinado modo de visualización:
tema=oscuro
Cuando vuelva a cargar la página, JavaScript puede consultar esa información y recuperar la preferencia.
Las cookies no son el único sistema disponible para almacenar información en el navegador. También existen mecanismos como localStorage o sessionStorage, pero las cookies tienen una característica importante: dependiendo de su configuración, también pueden enviarse automáticamente al servidor con las peticiones HTTP.
Por eso conviene utilizarlas solo cuando realmente sean adecuadas para la información que necesitamos gestionar.
Crear una cookie con JavaScript
El navegador permite trabajar con cookies mediante document.cookie.
Podemos crear una cookie sencilla así:
document.cookie = "tema=oscuro";
Si no indicamos una fecha de expiración o una duración máxima, será una cookie de sesión.
Para conservarla durante más tiempo podemos definir max-age:
document.cookie = "tema=oscuro; max-age=604800; path=/";
En este ejemplo la cookie durará 604.800 segundos, es decir, siete días.
El atributo path=/ hace que esté disponible en todo el sitio y no únicamente dentro de la ruta desde la que fue creada.
Leer cookies con JavaScript
Para consultar las cookies accesibles desde JavaScript podemos utilizar:
console.log(document.cookie);
El resultado será una cadena con las diferentes cookies disponibles:
tema=oscuro; idioma=es; vista=compacta
document.cookie no devuelve directamente un objeto con nombres y valores, por lo que si queremos localizar una cookie concreta tendremos que procesar esa cadena.
Una función sencilla podría ser:
function obtenerCookie(nombre) {
const cookies = document.cookie.split("; ");
const cookie = cookies.find(elemento =>
elemento.startsWith(`${nombre}=`)
);
return cookie
? decodeURIComponent(cookie.split("=")[1])
: null;
}
Después podemos utilizar:
const tema = obtenerCookie("tema");
if (tema === "oscuro") {
document.body.classList.add("tema-oscuro");
}
Para ejemplos pequeños esta solución es suficiente. Cuando un proyecto gestiona muchas cookies, utilizar una biblioteca puede simplificar bastante el código.
Cómo eliminar una cookie
No existe una instrucción especial de JavaScript para borrar una cookie.
El procedimiento habitual consiste en volver a crearla con una fecha de expiración pasada o con max-age=0.
Por ejemplo:
document.cookie = "tema=; max-age=0; path=/";
Hay un detalle importante: para eliminar correctamente una cookie debemos utilizar un path y, cuando corresponda, un dominio compatibles con los utilizados al crearla.
Si una cookie fue creada con determinados atributos y posteriormente intentamos eliminar otra cookie aparentemente igual pero asociada a otra ruta, el navegador puede conservar la original.
Gestionar cookies con js-cookie
Para evitar tener que procesar manualmente document.cookie, podemos utilizar js-cookie, una biblioteca JavaScript especializada en esta tarea.
No depende de jQuery.
Si trabajamos con npm podemos instalarla con:
npm install js-cookie
Después podemos importarla:
import Cookies from "js-cookie";
Crear una cookie es muy sencillo:
Cookies.set("tema", "oscuro");
Podemos indicar también una duración:
Cookies.set("tema", "oscuro", {
expires: 7,
path: "/"
});
Para recuperar su valor:
const tema = Cookies.get("tema");
Y para eliminarla:
Cookies.remove("tema", {
path: "/"
});
Para muchos proyectos este código resulta más legible que manipular directamente la cadena devuelta por document.cookie.
Ejemplo práctico: recordar una preferencia del usuario
Supongamos que nuestra web permite elegir entre un tema claro y otro oscuro.
Podemos guardar la selección mediante js-cookie:
const botonTema = document.querySelector("#cambiarTema");
botonTema.addEventListener("click", () => {
const oscuro = document.body.classList.toggle("tema-oscuro");
Cookies.set("tema", oscuro ? "oscuro" : "claro", {
expires: 30,
path: "/",
sameSite: "Lax"
});
});
Cuando cargue la página recuperamos la preferencia:
const temaGuardado = Cookies.get("tema");
if (temaGuardado === "oscuro") {
document.body.classList.add("tema-oscuro");
}
De esta forma el usuario mantiene su elección aunque cierre el navegador y vuelva posteriormente.
Este tipo de dato es un ejemplo razonable para una cookie porque contiene una preferencia pequeña y sencilla.
SameSite, Secure y otros atributos importantes
Actualmente no deberíamos limitar la gestión de cookies únicamente a nombre, valor y fecha de caducidad.
Los atributos de seguridad son importantes.
SameSite controla en qué situaciones se envía una cookie en peticiones entre sitios diferentes. Sus valores habituales son Lax, Strict y None.
Por ejemplo:
Cookies.set("preferencia", "1", {
expires: 7,
sameSite: "Lax",
secure: true
});
Secure indica que la cookie debe transmitirse únicamente mediante conexiones HTTPS.
Cuando una cookie necesita SameSite=None, debe utilizar también Secure.
Esto hace todavía más importante que una web funcione correctamente sobre HTTPS. Si necesitas profundizar en este punto, puedes consultar nuestro artículo sobre las diferencias entre un certificado SSL gratuito y uno de pago.
¿Qué es HttpOnly?
Hay un atributo de seguridad especialmente importante que no puede establecerse desde JavaScript: HttpOnly.
Una cookie HttpOnly no es accesible mediante document.cookie. Debe ser creada desde el servidor mediante la cabecera HTTP Set-Cookie.
Esto resulta especialmente útil para cookies relacionadas con sesiones o autenticación, porque evita que el código JavaScript de la página pueda leer su contenido.
Por ejemplo, una cookie de sesión sensible debería gestionarse normalmente desde el servidor y no mediante:
Cookies.set(...)
Las cookies accesibles desde JavaScript son adecuadas para determinados datos del lado cliente, pero no debemos utilizarlas para almacenar contraseñas, tokens sensibles u otra información confidencial.
Cookies y codificación de valores
Los valores de una cookie tienen ciertas restricciones.
Si trabajamos directamente con document.cookie, es recomendable codificar los valores cuando puedan contener caracteres especiales:
document.cookie =
`nombre=${encodeURIComponent("José García")}; path=/`;
Y decodificarlos al recuperarlos:
decodeURIComponent(valor);
Bibliotecas como js-cookie ya facilitan parte de esta gestión, lo que reduce errores cuando los valores no son cadenas simples.
¿Y si el proyecto todavía utiliza jQuery?
Podemos seguir utilizando jQuery para gestionar eventos o modificar el DOM sin utilizarlo para las cookies.
Por ejemplo:
$(".tema").on("click", function () {
const tema = $(this).data("tema");
Cookies.set("tema", tema, {
expires: 30,
path: "/"
});
$("body")
.removeClass("claro oscuro")
.addClass(tema);
});
Aquí jQuery interviene en el evento y en la manipulación del HTML, mientras que js-cookie se encarga del almacenamiento.
Por tanto, no es necesario reescribir por completo un proyecto antiguo para modernizar la gestión de cookies.
Este es también el motivo por el que ya no tiene sentido describir js-cookie como un “plugin jQuery”: es una biblioteca JavaScript independiente.
Cookies frente a localStorage
Para una preferencia puramente local también podríamos utilizar localStorage:
localStorage.setItem("tema", "oscuro");
const tema = localStorage.getItem("tema");
La elección depende del uso.
Si el dato solo debe permanecer en el navegador y JavaScript necesita acceder a él, localStorage puede ser suficiente.
Si necesitamos que determinada información participe en las peticiones HTTP hacia el servidor, las cookies disponen de ese mecanismo de forma nativa.
Lo importante es no utilizar cookies automáticamente para cualquier dato persistente simplemente porque sea una técnica conocida.
Gestión técnica y consentimiento de cookies son problemas diferentes
Crear una cookie mediante JavaScript es una cuestión técnica. Determinar si podemos crearla antes de obtener consentimiento es otra cuestión distinta.
No todas las cookies cumplen la misma función. Algunas pueden ser necesarias para prestar un servicio solicitado por el usuario, mientras que otras se utilizan para analítica, publicidad, personalización u otros fines.
Por tanto, un código técnicamente correcto para crear una cookie no determina por sí mismo si esa cookie debe establecerse inmediatamente o después de una determinada elección del usuario.
Si una web utiliza cookies que requieren consentimiento, el sistema de gestión debe impedir que se activen antes de que corresponda.
La política concreta debe definirse según el tipo de cookie, su finalidad y la normativa aplicable al proyecto.
¿Qué método deberíamos utilizar?
Para unas pocas cookies sencillas, JavaScript nativo mediante document.cookie puede ser suficiente.
Cuando necesitamos una API más cómoda para crear, consultar y eliminar cookies desde el navegador, js-cookie sigue siendo una alternativa ligera y mantenida.
Para sesiones, autenticación o información sensible, la gestión debe hacerse principalmente desde el servidor utilizando atributos como HttpOnly, Secure y SameSite según corresponda.
La elección depende, por tanto, de qué información estamos almacenando y para qué la necesita nuestra aplicación.
En proyectos profesionales, la gestión de cookies debe formar parte de una implementación web más amplia en la que también se tengan en cuenta seguridad, HTTPS, rendimiento y mantenimiento.
En ENDEOS desarrollamos y mantenemos soluciones web para empresas, incluyendo desarrollos a medida, mantenimiento, integraciones y evolución técnica de proyectos existentes.