Muchas veces queremos guardar una que otra información de nuestro usuario que esté visitando una página web pero por diversas razones no se quiere utilizar tecnologías del lado del servidor.
Al emplear otras tecnologías como Android, aplicaciones de escritorio o cualquier aplicación el lado del servidor es más fácil la respuesta al querer guardar información de manera persistentes en archivos y/o base de datos; con JavaScript tenemos algunas soluciones similares como las Cookies.
Las Cookies son pequeños archivos que se almacenan en las páginas web.
JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.
Guardar información en el navegador puede ser tan simple como escribir una línea de código… o tan complicado como no entender por qué tu cookie no se elimina aunque jures haberla borrado. En esta guía te explico qué son las cookies en JavaScript, cómo crearlas, leerlas, actualizarlas y eliminarlas, y sobre todo cómo usarlas en situaciones reales, tal como yo lo hago cuando quiero evitar bombardear mi API cada dos segundos pidiendo datos de usuario que NO van a cambiar.
Qué son las cookies en JavaScript y para qué sirven
Las cookies son pequeñas cadenas de texto que el navegador guarda de forma persistente. Nacieron en el mundo del protocolo HTTP, pero hoy en día, desde JavaScript, podemos manipularlas sin problemas usando document.cookie.
A diferencia de otras tecnologías de almacenamiento del navegador, las cookies se envían automáticamente al servidor en cada petición. Por eso suelen usarse para autenticación, sesiones y preferencias del usuario.
Cómo funcionan las cookies en el navegador
- Cada cookie es un par clave=valor con atributos adicionales: fecha de expiración, ruta, dominio, si debe ser segura, etc.
- Cuando accedes a document.cookie, obtienes todas las cookies del dominio separadas por punto y coma.
nombre=andres; usuario=acy; theme=darkCuándo usar cookies y cuándo NO usarlas
✔️ Usa cookies cuando:
- Necesitas que la información viaje al servidor (sesiones, auth).
- Quieres recordar al usuario entre visitas.
- Necesitas controlar expiración basada en tiempo.
✖️ No uses cookies cuando:
- Guardas datos grandes (límite ≈ 4KB).
- Es información sensible (mejor httpOnly desde servidor).
- No necesitas que el dato viaje a cada petición.
En esos casos: localStorage o sessionStorage.
Las Cookies en JavaScript
Seguramente habrás escuchado múltiples veces sobre las cookies al momento de entrar a un sitio web aparece un mensaje como el siguiente: "Este sitio, como la mayoría, usa cookies. Si sigues navegando entendemos que aceptas la política de cookies."
Pero tal vez no la hayas prestado mucha atención todavía, pero descuida; esta entrada ofrece una introducción al uso de los Cookies con JavaScript.
Empezando con las Cookies con JavaScript nativo
Veremos en este apartado, las funcionalidades más típicas al realizar con las Cookies.
Cómo crear cookies en JavaScript
Para crear Cookies debemos de emplear el esquema llave=valor o key=value:
document.cookie="key=value;"Accediendo a las Cookies
Para acceder a todas las Cookies desde la posición actual podemos usar el siguiente JavaScript:
document.cookie;Para nuestro ejemplo (que veremos un poco más alante) da algo como el siguiente resultado:
"nombre=andres; usuario=acy;"Ejemplos de Cookies
Crearemos un par de Cookies para experimentar con ellas; la primera Cookie indica el nombre de la persona y otra Cookie para indicar el usuario las cuales serán solicitadas al usuario mediante un prompt de JavaScript:
// ejemplo tomado en gran parte de http://www.w3schools.com/js/js_cookies.asp
function setCookie(cname, cvalue) {
document.cookie = cname + "=" + cvalue + "; ";
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for (var i = 0; i < ca.length; i++) {
var c = ca[i];
while (c.charAt(0) == ' ')
c = c.substring(1);
if (c.indexOf(name) == 0)
return c.substring(name.length, c.length);
}
return "";
}
function checkCookie() {
var nombre = getCookie("nombre");
var usuario = getCookie("usuario");
if (nombre != "" && usuario != "") {
alert("Hola " + nombre + " tu usuario es: " + usuario);
} else {
nombre = prompt("Da tu nombre:", "");
if (nombre != "" && nombre != NULL) {
setCookie("nombre", nombre);
}
usuario = prompt("Da tu usuario:", "");
if (usuario != "" && usuario != NULL) {
setCookie("usuario", usuario);
alert("refresca la página");
}
}
}
checkCookie();Lo que debes probar en el ejemplo anterior es que suministrar tu nombre y un usuario y refrescar la página.
Una vez realizado los pasos anteriores verás que el navegador "recuerda" el nombre colocado anteriormente y el usuario; con este pequeño ejemplo puedes evidenciar el uso básico de las cookies y de aquí explorar una amplia cantidad de nuevas posibilidades para colocar nuestras aplicaciones web en otro nivel.
Fecha de expiración de las Cookies
A las Cookies se les puede definir un tiempo de vida útil para que una vez que pase la fecha simplemente sean eliminadas de manera automática:
document.cookie="nombre=andres; expires=Thu, 17 Dec 2026 12:00:00 UTC";Para ello podemos emplear un esquema como el presentado en la W3C:
function setCookie(cname, cvalue, exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires="+d.toUTCString();
document.cookie = cname + "=" + cvalue + "; " + expires;
}Especificamos la cantidad de días que queremos que dure nuestra Cookie (con la variable exdays) y calculamos el tiempo a partir de la hora actual d.getTime(), luego resta especificar el formato adecuado:
var expires = "expires="+d.toUTCString();Terminando el CRUD de las Cookies
Hasta ahora hemos visto cómo crear, acceder y especificar el tiempo de vida de las Cookies, falta indicar cómo podemos eliminar y modificar las ya existentes.
Eliminando las Cookies.
En el apartado anterior indicamos cómo definir un tiempo de vida para las Cookies; podemos emplear una fecha anterior a la actual para eliminar las Cookies que ya no nos resulten de utilidad:
document.cookie="nombre=andres expires=Thu, 16 Dec 2026 12:00:00 UTC";Problemas típicos al eliminarlas (basado en experiencia real)
si la cookie no se borraba puede que sea problema del path:
Si la creaste con path=/app, debes borrarla con path=/app.
Modificando las Cookies.
Las Cookies se modifican tal cual se crean las mismas; es decir:
document.cookie="nombre=andres";Cómo leer cookies en JavaScript
Leer cookies es tan sencillo como consultar:
console.log(document.cookie);Leer todas las cookies
const todas = document.cookie;
console.log(todas);Obtener una cookie específica
Podemos extraerla manualmente:
function getCookie(name) {
const cookies = document.cookie.split(';');
for (let c of cookies) {
c = c.trim();
if (c.startsWith(name + "=")) {
return c.substring(name.length + 1);
}
}
return null;
}Función utilitaria getCookie() optimizada
function getCookie(name) {
const match = document.cookie.match(
new RegExp("(^|; )" + name + "=([^;]*)")
);
return match ? decodeURIComponent(match[2]) : null;
}Cómo actualizar y eliminar cookies
Actualizar es simplemente crear la misma cookie con un nuevo valor:
document.cookie = "theme=light; path=/";Atributos importantes de una cookie
Estos atributos marcan la diferencia entre una cookie funcional y una insegura o incompleta.
expires y max-age
Definen cuánto dura la cookie.
// 1 día
document.cookie = "user=John; max-age=86400";path
Controla en qué rutas será accesible la cookie.
path=/Es lo más común.
domain
Permite compartir cookies entre subdominios:
domain=midominio.comsecure
La cookie solo viaja por HTTPS.
secureSiempre deberías usarlo cuando guardas cualquier dato relevante.
samesite
Ayuda a prevenir ataques CSRF/XSRF.
Valores:
- strict
- lax (recomendado por defecto)
- none (requiere secure)
httpOnly (importante aclaración)
No se puede establecer desde JavaScript.
Lo hace el servidor y bloquea el acceso de JS a la cookie, protegiendo datos sensibles.
Ejemplo guardar datos básicos del usuario (tu experiencia)
En mis proyectos, suelo guardar email, nombre y cursos comprados en cookies. ¿Por qué?
Porque así evito hacer consultas innecesarias a la API cada vez que el usuario recarga la página.
Ejemplo basado en ese uso real:
function saveUserBasicData({ email, nombre, cursos }) {
document.cookie = `email=${email}; path=/; max-age=86400`;
document.cookie = `nombre=${nombre}; path=/; max-age=86400`;
document.cookie = `cursos=${encodeURIComponent(JSON.stringify(cursos))}; path=/; max-age=86400`;
}Ejemplo final de Cookies
Para terminar, veamos un ejemplo en donde usamos todo lo explicado hasta ahora.
>!--Demas JavaScript del ejemplo anterior-->
function deleteCookie() {
document.cookie = "nombre=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC";
}
function updateNombre() {
nombre = prompt("Da tu nombre nuevamente:", "");
if (nombre != "" && nombre != NULL) {
setCookie("nombre", nombre);
}
}
function updateUsuario() {
usuario = prompt("Da tu usuario nuevamente:", "");
if (usuario != "" && usuario != NULL) {
setCookie("usuario", usuario);
}
}Ejemplos completos en JavaScript
Aquí tienes un CRUD básico y limpio que puedes adaptar a tus aplicaciones:
function setCookie(name, value, days = 7) {
const date = new Date(Date.now() + days * 864e5);
document.cookie = `${encodeURIComponent(name)}=${encodeURIComponent(value)}; expires=${date.toUTCString()}; path=/`;
}
function getCookie(name) {
const match = document.cookie.match(new RegExp("(^|; )" + name + "=([^;]*)"));
return match ? decodeURIComponent(match[2]) : null;
}
function deleteCookie(name) {
document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/`;
}Ejemplo real: recordar sesión ligera sin tocar la API
En mis proyectos, suelo hacer algo así:
function cacheUserSession(usuario) {
setCookie("email", usuario.email, 1);
setCookie("nombre", usuario.nombre, 1);
setCookie("cursos", JSON.stringify(usuario.cursos), 1);
}
// Luego puedo accederlo sin tocar la API:
const email = getCookie("email");Buenas prácticas y seguridad al usar cookies
- No guardes datos sensibles en cookies accesibles desde JS.
- Usa secure si tu sitio está en HTTPS (recomendado siempre).
- Usa samesite=lax como norma general.
- No guardes objetos grandes (máximo ≈ 4KB por cookie).
- Limpia cookies que ya no usas para evitar tráfico innecesario.
Preguntas frecuentes
- ¿Puedo guardar objetos en una cookie?
- Sí, pero debes convertirlos a JSON y codificarlos.
- ¿Qué diferencia hay entre cookies, localStorage y sessionStorage?
- Cookies: viajan al servidor; límite 4KB.
- localStorage: persistente, no viaja al servidor.
- sessionStorage: se borra al cerrar la pestaña.
- ¿Puedo eliminar una cookie sin saber su path?
- No. Debes usar el mismo path con el que fue creada.
- ¿Las cookies son seguras?
- Con secure + samesite + httpOnly (desde servidor), bastante.
Plugin para las Cookies en JavaScript
Vimos un esquema bastante útil para sitios pequeños que no empleemos muchas librerías y/o que queramos realizar pocos guardados en las cookies; lo problemático que tiene de trabajar con Cookies de manera nativa es que puede ser complejo o volverse un verdadero lío cuando nos ponemos a actualizar variables, manejar muchas variables o varias consultas a las Cookies y esto es precisamente a la forma en que están guardadas que es netamente un String separados por punto y coma (,).
Para evitar el problema anterior podemos emplear un plugin que nos quite toda esta complejidad y en esta entrada veremos cómo emplear el plugin: JavaScript Cookie que nos permite trabajar fácilmente con las Cookies en JavaScript.
Como puedes ver en el código fuente, el plugin es realmente pequeño lo que significa que el impacto en carga para nuestro sitio web es mínimo.
Primeros pasos con JavaScript Cookie
Una vez que incluyamos el JavaScript anterior, su uso es realmente fácil; basta con emplear la variable Cookies de la siguiente manera para guardar un valor dentro de una Cookie:
Cookies.set('name', 'value');Para crear una Cookie con el valorvalue, y como todo método set() tiene su get(), para obtener el valor anterior tenemos:
Cookies.get('name'); // => 'value'Establecer duración de la cookie:
Si queremos establecer un tiempo de vida de la cookie; por ejemplo 7 días:
Cookies.set('name', 'value', { expires: 7 });Eliminar una cookie:
Por último, para remover una Cookie:
Cookies.remove('name');Estos son los métodos principales, de igual manera puedes consultar la documentación oficial en el enlace a github al principio de esta entrada.
Conclusión
Las cookies siguen siendo una herramienta imprescindible cuando necesitas persistencia simple + comunicación automática con el servidor. Son limitadas en tamaño, pero extremadamente útiles para recordar al usuario, manejar preferencias y evitar llamadas innecesarias a la API, como hago yo al guardar email, nombre o cursos comprados.
Con los ejemplos, atributos y buenas prácticas que te mostré, ya tienes todo lo necesario para usarlas de forma profesional.
Acepto recibir anuncios de interes sobre este Blog.
JavaScript cuenta con varias tecnologías persistentes (que la información que deseemos almacenar se mantenga aun cuando el usuario cierre o refresque la ventana de su navegador) como SQLite y las Cookies que trataremos en esta entrada.