5.1 Propiedades básicas de las cookies
Cookies — son pequeños fragmentos de datos que los sitios web pueden almacenar en el lado del cliente (en el navegador del usuario). Aparecieron hace 20 años antes de localStorage y todo este tiempo han ayudado a realizar sus funciones. Incluso ahora, a menudo se utilizan para guardar información sobre el estado de la sesión, preferencias del usuario, seguimiento y otras tareas.
Propiedades básicas de las cookies:
- Nombre y valor (name=value): clave-valor que almacena los datos.
- Dominio y ruta (domain, path): definen a qué URLs y dominios aplican las cookies.
- Tiempo de vida (expires, max-age): determina cuándo la cookie expira y se elimina.
- Seguridad (secure, HttpOnly): indica cómo y cuándo se pueden transmitir las cookies.
Configuración de cookies
Las cookies pueden configurarse usando JavaScript o código del servidor. En JavaScript, se utiliza la propiedad document.cookie para ello.
Ejemplo de configuración de cookies con JavaScript:
document.cookie = "username=JohnDoe";
Parámetros adicionales de las cookies:
- expires: indica la fecha de expiración de la cookie. Después de esa fecha, la cookie será eliminada.
- path: define la ruta para la cual la cookie es válida. Normalmente se utiliza / para hacer la cookie accesible para todo el sitio.
- domain: define el dominio para el cual la cookie es válida.
- secure: si se establece, la cookie solo se transmitirá a través de HTTPS.
- HttpOnly: si se establece, la cookie no puede ser accedida a través de JavaScript (solo del lado del servidor).
Ejemplo de configuración de cookies con parámetros adicionales:
document.cookie = "username=JohnDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
5.2 Gestión de cookies
1. Lectura de cookies
Todas las cookies para el documento actual se almacenan en una larga cadena en document.cookie. Para obtener el valor de una cookie, es necesario desglosar esta cadena.
Ejemplo de lectura de cookies:
function getCookie(name) {
const value = `; ${document.cookie}`;
const parts = value.split(`; ${name}=`);
if (parts.length === 2) return parts.pop().split(';').shift();
return null;
}
// Obtener el valor de la cookie "username"
const username = getCookie('username');
console.log(username); // Mostrar: JohnDoe
2. Actualización de cookies
Para actualizar el valor de una cookie, basta con establecerla nuevamente con el mismo nombre, pero con nuevo valor y parámetros.
Ejemplo de actualización de cookies:
document.cookie = "username=JaneDoe; expires=Fri, 31 Dec 2024 23:59:59 GMT; path=/";
3. Eliminación de cookies
Para eliminar una cookie, es necesario establecerle una fecha de vencimiento pasada.
Ejemplo de eliminación de cookies:
// Establecer fecha de vencimiento pasada
document.cookie = "username=JohnDoe; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
5.3 Ejemplos de trabajo con cookies
Explicación:
setCookie: establece una cookie con el nombre, valor y tiempo de vida (en días) dadosgetCookie: devuelve el valor de la cookie por el nombre dadodeleteCookie: elimina la cookie por el nombre dado
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Cookie Example</title>
</head>
<body>
<button onclick="handleSetCookie()">Set Cookie</button>
<button onclick="handleGetCookie()">Get Cookie</button>
<button onclick="handleDeleteCookie()">Delete Cookie</button>
<script>
function setCookie(name, value, days) {
let expires = "";
if (days) {
const date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toUTCString();
}
document.cookie = name + "=" + (value || "") + expires + "; path=/";
}
function getCookie(name) {
const nameEQ = name + "=";
const ca = document.cookie.split(';');
for (let i = 0; i < ca.length; i++) {
let c = ca[i].trim();
if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length, c.length);
}
return null;
}
function deleteCookie(name) {
document.cookie = name + '=; Max-Age=0; path=/';
}
function handleSetCookie() {
setCookie('username', 'JohnDoe', 7);
alert('Cookie "username" asignada con valor "JohnDoe" por 7 días');
}
function handleGetCookie() {
const cookieValue = getCookie('username');
if (cookieValue) {
alert('Cookie "username" tiene el valor: ' + cookieValue);
} else {
alert('Cookie "username" no encontrada');
}
}
function handleDeleteCookie() {
deleteCookie('username');
alert('Cookie "username" eliminada');
}
</script>
</body>
</html>
5.4 Configuración de cookies del lado del servidor
Veamos cómo trabajar con cookies HttpOnly y Secure en el servidor (Node.js).
Ejemplo:
const express = require('express');
const app = express();
app.get('/setcookie', (req, res) => {
res.cookie('secureServerCookie', 'ServerJohnDoe', {
maxAge: 7 * 24 * 60 * 60 * 1000, // 7 días
httpOnly: true,
secure: true,
sameSite: 'strict'
});
res.send('Secure server cookie set');
});
app.get('/getcookie', (req, res) => {
const cookie = req.cookies.secureServerCookie;
res.send(`Cookie value: ${cookie}`);
});
app.listen(3000, () => {
console.log('Server running on port 3000');
});
Ejemplos de uso de cookies:
- Autenticación: las cookies se utilizan a menudo para almacenar tokens de sesión que autentican al usuario entre solicitudes.
- Preferencias de usuario: las cookies pueden almacenar configuraciones de usuario, como el idioma de la interfaz o temas.
- Seguimiento de usuario: las cookies pueden utilizarse para rastrear el comportamiento de los usuarios en el sitio para análisis y personalización de contenido.
GO TO FULL VERSION