Cookies: document.cookie
En el mundo del desarrollo web, gestionar los datos de manera efectiva es crucial. Una de las formas fundamentales de manejar datos en el lado del cliente es mediante el uso de cookies. Las cookies son pequeños fragmentos de datos almacenados en el navegador del usuario. Juegan un papel vital en la mejora de la experiencia y la funcionalidad del usuario al recordar información de estado para la página web. En esta guía, profundizaremos en cómo gestionar cookies utilizando JavaScript, proporcionándote ejemplos de código prácticos para integrar en tus proyectos.
Creación de cookies con JavaScript
Para crear una cookie, simplemente necesitas asignar una cadena a document.cookie. Esta cadena debe contener un par clave-valor que represente el nombre y el valor de la cookie. Opcionalmente, puedes establecer atributos como la expiración, la ruta, el dominio y la seguridad de la cookie. El atributo domain controla el alcance: por defecto, las cookies están limitadas al host actual y sus subdominios. Establecer domain=.example.com hace que la cookie esté disponible para todos los subdominios, mientras que domain=app.example.com la restringe a ese subdominio específico.
Aquí tienes cómo crear una cookie básica:
Esta línea de código crea una cookie llamada username con el valor John Doe (codificado para manejar el espacio de forma segura), la configura para que expire el 8 de junio de 2025 y la hace accesible para todo el sitio web. Si el valor contiene espacios o caracteres especiales, siempre codifícalo usando encodeURIComponent para evitar problemas de análisis.
Establecimiento de fechas de expiración
Para garantizar que una cookie se almacene durante un período específico, debes establecer una fecha de expiración en formato de hora UTC utilizando el atributo expires. Alternativamente, puedes usar el atributo max-age para especificar la duración de la cookie en segundos.
WARNING
Especifica siempre una fecha de expiración para tus cookies para garantizar que solo persistan durante la duración prevista.
Esta cookie, userSettings, expirará después de 24 horas (86.400 segundos) desde el momento en que se crea.
Recuperación de cookies en JavaScript
Recuperar cookies implica leer la cadena document.cookie como ya viste en el ejemplo anterior. Esta cadena contiene todas las cookies del dominio actual, almacenadas en una lista separada por puntos y comas. Para encontrar una cookie específica, puedes dividir esta cadena y buscar en el array resultante:
Eliminación de cookies
Para eliminar una cookie, puedes establecer su fecha de expiración en una fecha pasada. Esto se hace efectivamente configurando el atributo expires en una fecha que ya haya ocurrido. Nota: También debes coincidir exactamente con los atributos path y domain utilizados cuando se creó la cookie, de lo contrario, el navegador no la eliminará.
Al establecer la fecha de expiración al 1 de enero de 1970, el navegador elimina la cookie inmediatamente.
Gestión segura de atributos de cookies
Al trabajar con cookies que contienen información sensible, la seguridad se vuelve primordial. Para mejorar la seguridad de las cookies, puedes usar los atributos Secure y SameSite a través de JavaScript. Ten en cuenta que el atributo HttpOnly no se puede configurar en el lado del cliente; debe configurarse en el servidor.
Secure: Garantiza que la cookie se envíe solo a través de HTTPS, evitando su exposición a través de una conexión HTTP.SameSite: Restringe cómo se envían las cookies con solicitudes entre sitios, ayudando a prevenir ataques CSRF.
WARNING
Si tu sitio web se sirve a través de HTTPS, agrega el atributo Secure a todas las cookies para evitar la transmisión a través de conexiones no seguras.
document.cookie = "sessionId=abc123; expires=Sat, 08 Jun 2025 12:00:00 UTC; path=/; Secure; SameSite=Lax";Esta cookie es segura y restringe las solicitudes entre sitios. (La protección HttpOnly debe manejarse en el lado del servidor.)
Conclusión
Las cookies son una herramienta poderosa para gestionar datos y configuraciones específicas del usuario en aplicaciones web. Al comprender cómo crear, recuperar y gestionar cookies de forma segura con JavaScript, los desarrolladores pueden mejorar significativamente la experiencia del usuario en sus sitios web. Recuerda siempre manejar las cookies con cuidado, especialmente cuando se trata de información personal o sensible.
Práctica
¿Qué atributos puedes usar para mejorar la seguridad de las cookies en JavaScript?