1. Introducción
En el desarrollo web utilizando JavaScript, las cookies se utilizan ampliamente como un mecanismo importante para almacenar información relacionada con el usuario.
Por ejemplo, se emplean comúnmente para mantener sesiones de inicio de sesión o almacenar datos del carrito de compras, mejorando significativamente la conveniencia del usuario.
Sin embargo, para principiantes, conceptos como “¿Qué es una cookie?” o “¿Cómo se pueden manipular las cookies con JavaScript?” pueden ser difíciles de entender.
En este artículo, proporcionamos una explicación detallada del manejo de cookies en JavaScript, desde conceptos básicos hasta usos avanzados.
Con ejemplos de código prácticos, esta guía está diseñada para ser útil tanto para principiantes como para desarrolladores intermedios.
2. ¿Qué es una cookie?
Concepto básico de las cookies
Una cookie es un pequeño fragmento de datos almacenado en un navegador web.
Se utiliza principalmente para los siguientes propósitos:
- Almacenar información ingresada por los usuarios en un sitio web (por ejemplo, credenciales de inicio de sesión).
- Registrar el comportamiento de los visitantes para fines de marketing y análisis.
- Preservar configuraciones (por ejemplo, preferencias de idioma o configuraciones de tema) para mejorar la experiencia del usuario.
Cómo funcionan las cookies
Las cookies están compuestas por pares clave-valor y se almacenan en el siguiente formato:
name=value; expires=Wed, 31 Dec 2025 23:59:59 GMT; path=/
En este ejemplo, la clave name se asigna el valor value, junto con una fecha de expiración y una ruta especificada.
Componentes principales de una cookie
- Nombre y valor (name=value) – La información básica de la cookie.
- Expiración (expires o max-age) – Especifica cuánto tiempo permanece válida la cookie.
- Ruta – Define el directorio o páginas donde la cookie es accesible.
- Atributo secure – Asegura que la cookie se envíe solo a través de conexiones HTTPS.
- Atributo SameSite – Ayuda a proteger contra ataques de solicitudes entre sitios.
Estas configuraciones flexibles hacen que las cookies sean útiles para mejorar la experiencia del usuario mientras se fortalece la seguridad.
3. Operaciones básicas de cookies en JavaScript
En JavaScript, las cookies se manipulan utilizando la propiedad document.cookie.
Esta sección introduce las operaciones básicas.
Estableciendo una cookie
A continuación, se muestra un ejemplo de cómo crear una nueva cookie.
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
Puntos clave:
username=John: Especifica la clave y el valor.expires: Establece la fecha de expiración. Si se omite, la cookie se elimina cuando se cierra el navegador.path=/: Hace que la cookie esté disponible en todo el sitio.
Obteniendo cookies
Todas las cookies se pueden recuperar de la siguiente manera:
console.log(document.cookie);
Salida de ejemplo:
username=John; theme=dark; lang=ja
Dado que múltiples cookies están separadas por punto y coma (;), necesitas dividir la cadena al procesar valores individuales.
Eliminando una cookie
Para eliminar una cookie, establece su fecha de expiración en una fecha pasada.
document.cookie = "username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/";
Este código elimina la cookie llamada username.
4. Configuraciones de atributos de cookie
Los atributos de cookie juegan un papel importante en la seguridad y el control de expiración.
Estableciendo la expiración
- Usando el atributo expires (basado en fecha)
document.cookie = "username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/";
- Usando el atributo max-age (basado en segundos)
document.cookie = "username=John; max-age=3600; path=/";
Esta configuración elimina automáticamente la cookie después de una hora.
Atributos de seguridad
- atributo secure (solo HTTPS)
document.cookie = "username=John; secure";
- atributo SameSite (protección contra solicitudes entre sitios)
document.cookie = "username=John; SameSite=Strict";
Al configurar correctamente estos atributos, puedes mejorar significativamente la seguridad y la protección de la privacidad.
5. Ejemplos de código prácticos
Contando las visitas del usuario
.«` function getCookie(name) { let cookies = document.cookie.split(‘; ‘); for (let i = 0; i < cookies.length; i++) { let parts = cookies[i].split(‘=’); if (parts[0] === name) return parts[1]; } return null; }
function setCookie(name, value, days) { let expires = «»; if (days) { let date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = «; expires=» + date.toUTCString(); } document.cookie = name + «=» + value + expires + «; path=/»; }
let visits = getCookie(«visits») ? parseInt(getCookie(«visits»)) : 0; visits++; setCookie(«visits», visits, 365); alert(«Your number of visits: » + visits);
Este código almacena el número de visitas del usuario en una cookie y actualiza el contador en cada visita.
## 6. Uso de bibliotecas de terceros
Aunque las cookies pueden gestionarse mediante la propiedad **document.cookie** en JavaScript, manipular cadenas y establecer atributos puede resultar engorroso.
Esto a menudo produce código más extenso y una menor legibilidad.
Para simplificar la gestión de cookies, usar **bibliotecas de terceros** es un enfoque común y eficaz.
En esta sección, nos centramos en una de las bibliotecas más populares: **js-cookie**.
### 1. ¿Qué es la biblioteca js-cookie?
**js-cookie** es una biblioteca ligera de JavaScript que simplifica las operaciones con cookies.
Sus principales características incluyen:
* **API simple** : Configura, obtiene y elimina cookies fácilmente.
* **Extensibilidad y flexibilidad** : Soporta opciones de seguridad y configuraciones personalizadas.
* **Ligera** : Aproximadamente 2 KB después de la minificación.
### 2. Instalación de js-cookie
**Carga mediante CDN**
Agrega el siguiente código dentro de la etiqueta `<head>` de tu archivo HTML.
**Instalación mediante npm o yarn**
Si gestionas dependencias en tu proyecto, usa uno de los siguientes comandos:
npm install js-cookie
or
yarn add js-cookie
### 3. Uso básico
**Establecer una cookie**
Cookies.set(‘username’, ‘John’, { expires: 7 }); // Valid for 7 days
**Obtener una cookie**
let username = Cookies.get(‘username’); console.log(username); // Output: John
**Eliminar una cookie**
Cookies.remove(‘username’);
### 4. Configuración avanzada de opciones
**Establecer expiración y ruta**
Cookies.set(‘session’, ‘active’, { expires: 1, path: ‘/’ });
* **expires** : Expira después de 1 día.
* **path** : Hace que la cookie esté disponible en todo el sitio.
**Agregar el atributo secure**
Cookies.set(‘secureData’, ‘secret’, { secure: true });
* **secure: true** : Envía la cookie solo a través de HTTPS.
**Especificar el atributo SameSite**
Cookies.set(‘strictCookie’, ‘value’, { sameSite: ‘Strict’ });
* **sameSite: 'Strict'** : Bloquea solicitudes entre sitios y mejora la seguridad.
## 7. Consideraciones de seguridad y privacidad
Al trabajar con cookies en JavaScript, las **medidas de seguridad** y la **protección de la privacidad** son extremadamente importantes.
Un manejo inadecuado puede provocar fugas de datos o accesos no autorizados.
Esta sección explica las mejores prácticas para una gestión segura de cookies.
### 1. Medidas de seguridad
#### Uso de HTTPS y el atributo Secure
Establece el atributo **Secure** para que las cookies se envíen solo a través de conexiones HTTPS.
Esto ayuda a prevenir la interceptación y manipulación de datos.
**Ejemplo:**
document.cookie = «sessionID=abc123; Secure»;
Al usar la biblioteca de terceros **js-cookie**, puedes configurarla de la siguiente manera:
Cookies.set(‘sessionID’, ‘abc123’, { secure: true });
#### Uso del atributo HttpOnly (configuración del lado del servidor)
JavaScript no puede establecer el atributo HttpOnly del lado del cliente.
Sin embargo, configurarlo del lado del servidor ayuda a prevenir ataques **XSS (Cross-Site Scripting)**.
**Ejemplo: Configuración del lado del servidor (PHP)**
setcookie(‘sessionID’, ‘abc123’, [ ‘httponly’ => true, ‘secure’ => true, ‘samesite’ => ‘Strict’ ]);
#### Previniendo ataques CSRF con el atributo SameSite
Para prevenir ataques **CSRF (Cross-Site Request Forgery)**,
configure el atributo **SameSite**.
**Ejemplo:**
document.cookie = «token=secureToken; SameSite=Strict»;
### 2. Protección de la privacidad
#### Limitar el tipo de información almacenada
Evite almacenar información personal o sensible (como contraseñas) en cookies.
En su lugar, almacene identificadores anónimos, como IDs de sesión, y valídelos del lado del servidor.
**Ejemplo: Usando un ID de sesión**
Cookies.set(‘sessionID’, ‘randomString123’, { secure: true, httpOnly: true });
#### Cumplimiento con GDPR y regulaciones de privacidad
Debido a regulaciones como el **GDPR (Reglamento General de Protección de Datos)** en la UE
y la **Ley de Protección de Información Personal** de Japón,
se aplican los siguientes requisitos al usar cookies:
1. **Consentimiento obligatorio del usuario** Los usuarios deben ser informados sobre el propósito del uso de cookies y proporcionar su consentimiento explícito.
2. **Proporcionar opciones de suscripción y exclusión** Los usuarios deben poder rechazar cookies no esenciales.
**Ejemplo: Banner de consentimiento de cookies (JavaScript)**
if (!Cookies.get(‘cookieConsent’)) { let consent = confirm(‘This site uses cookies. Do you allow cookies?’); if (consent) { Cookies.set(‘cookieConsent’, ‘true’, { expires: 365 }); } }
## 8. Cómo comprobar las cookies en su navegador
Al establecer, obtener o eliminar cookies con JavaScript,
puede verificar su comportamiento usando las **herramientas de desarrollo del navegador**.
Esta sección explica cómo comprobar las cookies en los principales navegadores.
### 1. Comprobando cookies en Google Chrome
#### Abrir herramientas de desarrollo
1. Haga clic derecho en la página y seleccione **"Inspeccionar"** o **"Inspeccionar elemento"**.
2. O presione **F12** o **Ctrl + Shift + I** (en Mac: **Cmd + Opt + I**).
#### Pasos para ver cookies
1. Seleccione la pestaña **"Application"** en las herramientas de desarrollo.
2. En el menú izquierdo, haga clic en **"Storage" → "Cookies"**.
3. Seleccione el dominio objetivo de la lista.
#### Ver detalles de las cookies
Las cookies del sitio seleccionado se muestran en formato de tabla.
Cada columna representa la siguiente información:
Column Description Name Cookie name (key) Value Stored value Domain Applicable domain Path Applicable path Expires / Max-Age Expiration date Size Cookie size (bytes) HttpOnly Whether HttpOnly is enabled (not accessible via JavaScript) Secure Whether Secure is enabled (HTTPS only) SameSite SameSite setting (Strict, Lax, None)
#### Editar y eliminar cookies
* **Editar**: Haga doble clic en una fila para modificar su valor.
* **Eliminar**: Seleccione una fila y presione la tecla **Delete**, o haga clic derecho y elija **Delete**.
### 2. Comprobando cookies en Firefox
#### Abrir herramientas de desarrollo
1. Haga clic derecho en la página y seleccione **"Inspeccionar"**.
2. O presione **F12** o **Ctrl + Shift + I**.
#### Ver cookies
1. Seleccione la pestaña **"Storage"**.
2. Haga clic en **"Cookies"** del menú izquierdo.
3. Seleccione el sitio objetivo de los dominios mostrados.
#### Editar y eliminar
Al igual que en Chrome, puede editar directamente los valores o eliminar cookies.
### 3. Comprobando cookies en Safari (para usuarios de Mac)
#### Habilitar herramientas de desarrollo
1. Abra **"Settings"** desde el menú de Safari.
2. Seleccione la pestaña **"Advanced"** y marque **"Show Develop menu in menu bar"**.
#### Abrir herramientas de desarrollo
1. Haga clic derecho en la página y seleccione **"Inspect Element"**.
2. O presione **Cmd + Opt + I**.
#### Ver cookies
1. Seleccione la pestaña **"Storage"**.
2. Elija **"Cookies"** para revisar su contenido.
### 4. Comprobando cookies mediante la consola
Las cookies también pueden inspeccionarse usando la **consola de JavaScript**.
**Ejemplo: Mostrar todas las cookies**
console.log(document.cookie);
**Ejemplo: Obtener una cookie específica**
let cookies = document.cookie.split(‘; ‘); let username = cookies.find(row => row.startsWith(‘username=’)).split(‘=’)[1]; console.log(username);
**Las cookies también pueden añadirse o eliminarse directamente desde la consola.**
## 9. Resumen
En las secciones anteriores, hemos cubierto el **manejo de cookies en JavaScript**
desde conceptos básicos hasta casos de uso avanzados.
Esta sección revisa los puntos clave y resume las mejores prácticas aplicables.
### 1. Conceptos básicos de cookies y cómo funcionan
Las cookies son un mecanismo para almacenar pequeños fragmentos de datos en un navegador web.
* **Casos de uso** : Mantener sesiones de inicio de sesión, gestionar preferencias de usuario y rastrear comportamiento.
* **Componentes** : Pares clave-valor, configuraciones de expiración, rutas, dominios y atributos de seguridad.
Comprender estos fundamentos permite adaptar las cookies de manera flexible a diversos escenarios.
### 2. Operaciones con cookies en JavaScript
En JavaScript, puedes establecer, recuperar y eliminar cookies fácilmente usando la
propiedad **document.cookie**.
**Ejemplo: Establecer una cookie**
document.cookie = «username=John; expires=Fri, 31 Dec 2025 23:59:59 GMT; path=/»;
**Ejemplo: Obtener cookies**
console.log(document.cookie);
**Ejemplo: Eliminar una cookie**
document.cookie = «username=; expires=Thu, 01 Jan 1970 00:00:00 GMT; path=/»;
Estos ejemplos cubren lo básico, pero para requisitos más complejos,
se recomienda usar una biblioteca de terceros.
### 3. Uso de bibliotecas de terceros
Las bibliotecas facilitan significativamente la gestión de cookies y la mejoran en legibilidad.
**Ejemplo usando js-cookie**
Cookies.set(‘username’, ‘John’, { expires: 7, secure: true }); let username = Cookies.get(‘username’); Cookies.remove(‘username’);
**Ventajas**:
* Código corto e intuitivo.
* Configuración fácil de atributos de seguridad y opciones.
* Compatibilidad fluida entre navegadores.
### 4. Medidas de seguridad y privacidad
Las cookies siempre deben usarse con configuraciones adecuadas de
**seguridad** y **protección de privacidad**.
**Prácticas clave de seguridad**
1. **Usar HTTPS y el atributo Secure** : Evita la intercepción de datos.
2. **Establecer el atributo SameSite** : Protege contra ataques CSRF.
3. **Usar el atributo HttpOnly** : Mitiga ataques XSS (configuración del lado del servidor).
**Prácticas clave de privacidad**
1. **No almacenar información personal** : Almacena solo ID o tokens y gestiona los datos reales en el servidor.
2. **Cumplir con regulaciones** : Implementa la gestión de consentimiento de acuerdo con el RGPD y leyes relacionadas.
3. **Encriptar datos sensibles** : Siempre encripta la información crítica antes de almacenarla.
### 5. Verificación y depuración de cookies
Usar herramientas de desarrollo ayuda a verificar y depurar el comportamiento de las cookies de manera eficiente.
**Herramientas específicas del navegador**
* **Google Chrome** : Interfaz altamente funcional y amigable para el usuario.
* **Firefox** : Funciones avanzadas de gestión de almacenamiento.
* **Edge y Safari** : Se gestionan usando pasos similares a Chrome.
**Usando la consola de JavaScript**
console.log(document.cookie); «`
Esto permite pruebas y depuración rápidas.
6. Mejores prácticas aplicables
A continuación, se presentan recomendaciones concretas para una gestión segura y eficiente de cookies:
- Almacenar solo los datos mínimos requeridos Evita cookies innecesarias y gestiona datos críticos en el servidor.
- Establecer períodos de expiración apropiados Usa tiempos de expiración cortos y elimina cookies no utilizadas.
- Fortalecer configuraciones de seguridad Configura siempre los atributos Secure, HttpOnly y SameSite.
- Obtener consentimiento del usuario Implementa un banner de consentimiento que cumpla con el RGPD y otras regulaciones de privacidad.
- Usar herramientas de depuración de manera efectiva Inspecciona regularmente las cookies usando las herramientas de desarrollo del navegador.
- Aprovechar bibliotecas de terceros Usa bibliotecas como js-cookie para simplificar la gestión y mejorar la legibilidad.
Conclusión
Este artículo proporcionó una visión general completa del manejo de cookies en JavaScript,
cubriendo todo desde el uso básico hasta consideraciones de seguridad y privacidad.
Lecciones clave
- Los fundamentos de cómo funcionan las cookies y cuándo utilizarlas.
- Cómo establecer, obtener y eliminar cookies usando JavaScript.
- La importancia de las medidas de seguridad y el cumplimiento legal.
- Flujos de trabajo eficientes usando herramientas de desarrollo y bibliotecas de terceros.
Próximos pasos
Utiliza esta guía como referencia para implementar la gestión de cookies en proyectos del mundo real.
Para mantener la seguridad y el cumplimiento con las leyes de privacidad en evolución,
el aprendizaje continuo y la revisión regular de las mejores prácticas son esenciales.
Sigue incorporando nuevas tecnologías y conocimientos para crear aplicaciones web más seguras,
más amigables para el usuario.
