Las cookies
Las cookies son pequeños fragmentos de datos que se almacenan en el navegador del usuario. Se utilizan principalmente para recordar información sobre el usuario entre diferentes visitas a un sitio web, como sus preferencias, información de inicio de sesión, o historial de navegación.
1. Cómo funcionan las cookies? #
- Almacenamiento en el navegador: Las cookies se almacenan en el navegador y se envían automáticamente al servidor con cada solicitud HTTP.
- Pares clave-valor: Cada cookie es un par clave-valor, similar a
clave=valor, y pueden tener atributos adicionales como la fecha de expiración, el dominio, y el camino (path). - Persistencia: Las cookies pueden ser temporales (solo duran hasta que el navegador se cierra) o persistentes (duran hasta una fecha de expiración específica).
Crear y leer cookies en JavaScript #
- Crear una cookie:
Puedes crear una cookie asignando una cadena de texto al atributo document.cookie.
Sintaxis:
1document.cookie = "clave=valor; expires=fecha; path=path";
clave=valor: Define la clave y el valor de la cookie.expires=fecha: (Opcional) Establece la fecha de expiración de la cookie. Si no se especifica, la cookie será temporal.path=path: (Opcional) Define el camino (path) donde la cookie es válida. Por defecto, es la ruta de la página actual.
Ejemplo:
1document.cookie = "usuario=Juan; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
En este ejemplo:
- Se crea una cookie llamada
usuariocon el valorJuanque expira el 31 de diciembre de 2024 y es válida en todo el dominio (path=/).
- Leer una cookie:
Para leer una cookie, accedes a document.cookie, que devuelve todas las cookies como una cadena de texto.
Ejemplo:
1let cookies = document.cookie; 2console.log(cookies); // Muestra "usuario=Juan"
Para leer una cookie específica, necesitas extraerla de la cadena document.cookie, ya que JavaScript no proporciona un método directo para obtener una cookie por su nombre.
Ejemplo para leer una cookie específica:
1function getCookie(nombre) { 2 let nombreEQ = nombre + "="; 3 let partes = document.cookie.split(';'); 4 for(let i = 0; i < partes.length; i++) { 5 let parte = partes[i].trim(); 6 if (parte.indexOf(nombreEQ) === 0) { 7 return parte.substring(nombreEQ.length, parte.length); 8 } 9 } 10 return null; 11} 12 13let usuario = getCookie("usuario"); 14console.log(usuario); // Muestra "Juan"
- Eliminar una cookie:
Para eliminar una cookie, estableces su fecha de expiración en una fecha pasada.
Ejemplo:
1document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
En este ejemplo:
- Se elimina la cookie
usuarioestableciendo su fecha de expiración en el pasado.
Atributos adicionales de las cookies #
Secure: Indica que la cookie solo se enviará a través de conexiones HTTPS.HttpOnly: Evita que la cookie sea accesible mediante JavaScript (por ejemplo, para protegerla de ataques XSS).SameSite: Ayuda a proteger contra ataques CSRF, indicando si la cookie solo debe ser enviada con solicitudes del mismo sitio (Strict) o también con solicitudes de otros sitios (LaxoNone).
El futuro de las cookies en la web, particularmente las cookies de terceros, ha sido objeto de mucho debate en los últimos años. Aunque no van a desaparecer por completo, las cookies de terceros están enfrentando una disminución considerable debido a preocupaciones sobre la privacidad de los usuarios y cambios en las políticas de los navegadores.
Resumen del tema
Conceptos clave #
- Mecanismo de Cookies: pequeños bloques de datos (~4 KB por cookie) almacenados en el cliente que se transmiten automáticamente en cada cabecera de petición HTTP al servidor.
- Manipulación con
document.cookie:- Creación/Actualización: asignación
document.cookie = "key=value; expires=...; path=/;". - Lectura: string concatenado separado por punto y coma que requiere parseo manual.
- Eliminación: reasignación con fecha de expiración en el pasado (
expires=01 Jan 1970 00:00:00 UTC).
- Creación/Actualización: asignación
- Directivas de Seguridad:
Secure(solo HTTPS),HttpOnly(inaccesible desde JS contra XSS) ySameSite(Strict,Lax,Nonecontra CSRF).
Qué debes recordar #
Las cookies viajan automáticamente en cada petición HTTP hacia el servidor; utiliza flags de seguridad (Secure, HttpOnly, SameSite) para proteger datos sensibles.