Las cookies son pequeños fragmentos de datos que los sitios web almacenan en el navegador del usuario. Su función principal es permitir que las aplicaciones web recuerden información sobre el usuario o el estado de la sesión, lo cual es fundamental dado que el protocolo HTTP es inherentemente "sin estado". Esto habilita funcionalidades como el inicio de sesión automático, el seguimiento de preefrencias, el historial de navegación o incluso la persistencia de la posición de elementos interactivos en una página web.
A continuación, exploraremos cómo trabajar con cookies en JavaScript, cubriendo las funciones básicas para su manipulación y proporcionando ejemplos prácticos de su aplicación en el desarrollo web.
- Funciones Esneciales para la Manipulación de Cookies
Para interactuar con las cookies en JavaScript, necesitamos funciones que nos permitan establecer (crear/actualizar), obtener (leer) y eliminar cookies. Estas son las operaciones fundamentales para cualquier gestión de datos en el lado del cliente mediante cookies.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Utilerías Básicas de Cookies</title>
</head>
<body>
<h1>Demostración de Funciones de Cookie</h1>
<p>Abra la consola del navegador (F12) para ver los resultados de la gestión de cookies.</p>
<script type="text/javascript">
/**
* Crea o actualiza una cookie.
* @param {string} key - El nombre de la cookie.
* @param {string} val - El valor de la cookie.
* @param {number} days - Número de días para que la cookie expire.
*/
function crearOActualizarCookie(key, val, days) {
const expirationDate = new Date();
expirationDate.setDate(expirationDate.getDate() + days);
// Asegura que el valor de la cookie esté codificado correctamente
const encodedValue = encodeURIComponent(val);
document.cookie = `${key}=${encodedValue}; expires=${expirationDate.toUTCString()}; path=/`;
console.log(`Cookie '${key}' establecida/actualizada con valor '${val}' por ${days} días.`);
}
/**
* Recupera el valor de una cookie por su clave.
* @param {string} key - El nombre de la cookie a buscar.
* @returns {string} El valor de la cookie decodificado, o una cadena vacía si no se encuentra.
*/
function leerCookie(key) {
const allCookies = document.cookie.split('; ');
for (let i = 0; i < allCookies.length; i++) {
const cookiePair = allCookies[i].split('=');
// Compara el nombre de la cookie (limpiando espacios)
if (cookiePair[0].trim() === key) {
// Decodifica el valor antes de retornarlo
return decodeURIComponent(cookiePair[1]);
}
}
return ''; // Retorna vacío si no se encuentra la cookie
}
/**
* Elimina una cookie, estableciendo su fecha de expiración en el pasado.
* @param {string} key - El nombre de la cookie a eliminar.
*/
function eliminarCookie(key) {
crearOActualizarCookie(key, '', -1); // Un valor nulo y fecha pasada la elimina
console.log(`Cookie '${key}' eliminada.`);
}
// --- Ejemplos de uso de las funciones ---
console.log("--- Iniciando demostración de Cookies ---");
// 1. Establecer una nueva cookie
crearOActualizarCookie('preferenciaTema', 'oscuro', 7); // Expira en 7 días
crearOActualizarCookie('identificadorSesion', 'XYZ123ABC', 1); // Expira en 1 día
// 2. Leer cookies existentes
let temaActual = leerCookie('preferenciaTema');
console.log(`Preferencia de tema guardada: ${temaActual}`);
let idSesion = leerCookie('identificadorSesion');
console.log(`Identificador de sesión: ${idSesion}`);
// 3. Intentar leer una cookie que no existe
let cookieInexistente = leerCookie('idiomaUsuario');
console.log(`Idioma de usuario (no encontrado): '${cookieInexistente}'`);
// 4. Actualizar una cookie
crearOActualizarCookie('preferenciaTema', 'claro', 14); // Ahora expira en 14 días
temaActual = leerCookie('preferenciaTema');
console.log(`Preferencia de tema actualizada: ${temaActual}`);
// 5. Eliminar una cookie
// eliminarCookie('identificadorSesion');
// idSesion = leerCookie('identificadorSesion');
// console.log(`Identificador de sesión después de eliminar: '${idSesion}'`);
console.log("--- Demostración finalizada ---");
</script>
</body>
</html>
- Persistencia de la Posición de un Elemento Arrastrable con Cookies
Las cookies son una excelente herramienta para recordar el estado de elementos de la interfaz de usuario entre diferentes visitas o recargas de página. Este ejemplo ilustra cómo se puede usar una cookie para almacenar y restaurar la última posición de un elemento <code>div</code> arrastrable.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Arrastrar y Guardar Posición</title>
<style type="text/css">
body { margin: 0; overflow: hidden; background-color: #f0f2f5; }
#elementoMovible {
width: 150px;
height: 100px;
background-color: #1a73e8; /* Azul vibrante */
position: absolute;
cursor: grab;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-size: 1.1em;
box-shadow: 0 4px 8px rgba(0,0,0,0.2);
transition: background-color 0.2s ease;
}
#elementoMovible:active {
cursor: grabbing;
background-color: #155cb7;
}
</style>
</head>
<body>
<div id="elementoMovible">Arrastra Aquí</div>
<script type="text/javascript">
// Reutilizamos las funciones de cookies adaptadas para este ejemplo
function establecerInfoCookie(nombre, valor, diasValidez) {
const fechaExp = new Date();
fechaExp.setDate(fechaExp.getDate() + diasValidez);
document.cookie = `${nombre}=${encodeURIComponent(valor)}; expires=${fechaExp.toUTCString()}; path=/`;
}
function obtenerInfoCookie(nombre) {
const cookies = document.cookie.split('; ');
for (let i = 0; i < cookies.length; i++) {
const par = cookies[i].split('=');
if (par[0].trim() === nombre) {
return decodeURIComponent(par[1]);
}
}
return '';
}
window.addEventListener('load', () => {
const elementoMovible = document.getElementById('elementoMovible');
let offsetCursorX = 0;
let offsetCursorY = 0;
// Cargar posición guardada desde las cookies al iniciar
const posicionXGuardada = obtenerInfoCookie('posicionX');
const posicionYGuardada = obtenerInfoCookie('posicionY');
if (posicionXGuardada && posicionYGuardada) {
elementoMovible.style.left = `${posicionXGuardada}px`;
elementoMovible.style.top = `${posicionYGuardada}px`;
} else {
// Posición inicial si no hay cookie
elementoMovible.style.left = '50px';
elementoMovible.style.top = '50px';
}
elementoMovible.addEventListener('mousedown', (evt) => {
evt.preventDefault(); // Previene la selección de texto
const eventoActual = evt || window.event;
offsetCursorX = eventoActual.clientX - elementoMovible.offsetLeft;
offsetCursorY = eventoActual.clientY - elementoMovible.offsetTop;
const moverElemento = (eventoMovimiento) => {
const e = eventoMovimiento || window.event;
let nuevaPosX = e.clientX - offsetCursorX;
let nuevaPosY = e.clientY - offsetCursorY;
// Obtener dimensiones de la ventana y del elemento
const limiteAncho = document.documentElement.clientWidth - elementoMovible.offsetWidth;
const limiteAlto = document.documentElement.clientHeight - elementoMovible.offsetHeight;
// Asegurar que el elemento no salga de los límites de la ventana
nuevaPosX = Math.max(0, Math.min(nuevaPosX, limiteAncho));
nuevaPosY = Math.max(0, Math.min(nuevaPosY, limiteAlto));
elementoMovible.style.left = `${nuevaPosX}px`;
elementoMovible.style.top = `${nuevaPosY}px`;
};
const soltarElemento = () => {
document.removeEventListener('mousemove', moverElemento);
document.removeEventListener('mouseup', soltarElemento);
// Guardar la posición actual en cookies (válidas por 30 días)
establecerInfoCookie('posicionX', elementoMovible.offsetLeft, 30);
establecerInfoCookie('posicionY', elementoMovible.offsetTop, 30);
console.log(`Posición guardada: X=${elementoMovible.offsetLeft}, Y=${elementoMovible.offsetTop}`);
};
document.addEventListener('mousemove', moverElemento);
document.addEventListener('mouseup', soltarElemento);
});
});
</script>
</body>
</html>
- Recordar el Nombre de Usuario en un Formulario de Acceso
Una aplicación muy común de las cookies es la de recordar el nombre de usuario en formularios de inicio de sesión. Esto mejora la usabilidad al evitar que el usuario tenga que introducir su nombre cada vez que visita el sitio. Este ejemplo demuestra cómo implementar esta funcionalidad.
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Recordar Nombre de Usuario</title>
<style>
body { font-family: 'Arial', sans-serif; background-color: #e9ecef; display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; }
.contenedor-formulario { background-color: white; padding: 30px; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); width: 100%; max-width: 380px; text-align: center; }
h2 { color: #343a40; margin-bottom: 25px; }
.campo-entrada { margin-bottom: 20px; text-align: left; }
.campo-entrada label { display: block; margin-bottom: 8px; font-weight: bold; color: #495057; }
.campo-entrada input[type="text"], .campo-entrada input[type="password"] {
width: calc(100% - 20px);
padding: 10px;
border: 1px solid #ced4da;
border-radius: 5px;
font-size: 1em;
}
.btn-accion {
background-color: #28a745; /* Verde */
color: white;
padding: 12px 25px;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 1.1em;
font-weight: bold;
transition: background-color 0.3s ease;
width: 100%;
margin-top: 10px;
}
.btn-accion:hover {
background-color: #218838;
}
.enlace-secundario {
display: block;
margin-top: 15px;
color: #007bff;
text-decoration: none;
font-size: 0.9em;
}
.enlace-secundario:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<div class="contenedor-formulario">
<h2>Iniciar Sesión</h2>
<form id="formularioLogin" action="javascript:void(0);" method="POST">
<div class="campo-entrada">
<label for="inputUsuario">Usuario:</label>
<input type="text" id="inputUsuario" name="usuario" autocomplete="username" required>
</div>
<div class="campo-entrada">
<label for="inputClave">Contraseña:</label>
<input type="password" id="inputClave" name="clave" autocomplete="current-password" required>
</div>
<button type="submit" class="btn-accion">Acceder</button>
<a href="#" id="enlaceOlvidarUsuario" class="enlace-secundario">Olvidar mi usuario</a>
</form>
</div>
<script type="text/javascript">
// Reutilizamos las funciones de cookies adaptadas para este ejemplo
function guardarDatoCookie(nombre, valor, dias) {
const fecha = new Date();
fecha.setDate(fecha.getDate() + dias);
document.cookie = `${nombre}=${encodeURIComponent(valor)}; expires=${fecha.toUTCString()}; path=/`;
}
function leerDatoCookie(nombre) {
const todasLasCookies = document.cookie.split('; ');
for (let i = 0; i < todasLasCookies.length; i++) {
const par = todasLasCookies[i].split('=');
if (par[0].trim() === nombre) {
return decodeURIComponent(par[1]);
}
}
return '';
}
function borrarDatoCookie(nombre) {
guardarDatoCookie(nombre, '', -1); // Establece expiración en el pasado
}
window.addEventListener('load', () => {
const form = document.getElementById('formularioLogin');
const campoUsuario = document.getElementById('inputUsuario');
const botonOlvidar = document.getElementById('enlaceOlvidarUsuario');
const NOMBRE_COOKIE_USUARIO = 'usuarioRecordado';
// Al cargar la página, intentar prellenar el campo de usuario
const usuarioGuardado = leerDatoCookie(NOMBRE_COOKIE_USUARIO);
if (usuarioGuardado) {
campoUsuario.value = usuarioGuardado;
console.log(`Usuario recordado cargado: ${usuarioGuardado}`);
}
// Al enviar el formulario, guardar el nombre de usuario
form.addEventListener('submit', (evento) => {
evento.preventDefault(); // Evita el envío real del formulario para este demo
guardarDatoCookie(NOMBRE_COOKIE_USUARIO, campoUsuario.value, 30); // Guardar por 30 días
alert(`¡Bienvenido, ${campoUsuario.value}! Tu usuario ha sido recordado.`);
// Aquí iría la lógica de autenticación real
});
// Al hacer clic en "Olvidar mi usuario", borrar la cookie
botonOlvidar.addEventListener('click', (evento) => {
evento.preventDefault(); // Evita el comportamiento por defecto del enlace
borrarDatoCookie(NOMBRE_COOKIE_USUARIO);
campoUsuario.value = '';
alert('El nombre de usuario recordado ha sido eliminado.');
});
});
</script>
</body>
</html>