¿Qué son las Cookies y cómo trabajar con ellas usando JavaScript

? ? ? No del todo… ??? ¡Mejor! La galleta ? es uno de los emojis favoritos de la web y también una de las tecnologías más importantes de la web.

Echemos un vistazo a qué se trata, ¿de acuerdo?

Los Conceptos Básicos de las Cookies del Navegador

Las cookies del navegador fueron introducidas en la web con el fin de mantener información persistente sobre el usuario. El primer caso de uso fue verificar si un usuario ya había visitado el sitio web de Netscape.

Las cookies son cadenas que tienen un campo de nombre, un campo de valor y atributos opcionales adicionales. Los valores son cadenas y puedes almacenar lo que consideres mejor para tu aplicación. El cookie _ga de Google Analytics es probablemente uno de || el cookie más común que hay, generalmente se ve así:

• Nombre: _ga
• Valor: GA1.3.210706468.1583989741
• Dominio: .ejemplo.com
• Ruta: /
• Expira / Max-Age: 2022-03-12T05:12:53.000Z

Las cookies pueden almacenar hasta 4096 bytes de datos (esto incluye nombre, valor, dominio, fecha de vencimiento y lo que sea que puedas encajar allí). Puedes agregar un número limitado de cookies por dominio que cambia según tu navegador.

Cómo se crean las cookies

Hay dos formas principales de crear cookies:

• Con HTTP puedes enviar Set-Cookie en el encabezado de respuesta HTTP. Dependiendo de las tecnologías que estés utilizando para tu servidor web, puedes usar diferentes herramientas y bibliotecas para gestionar los encabezados de las cookies. Estas herramientas deberían crear respuestas HTTP que se parezcan aproximadamente a esto:

HTTP/2.0 200 OK
Content-type: text/html
Set-Cookie: alligator_name=barry
Set-Cookie: tasty_cookie=strawberry
... More http Content

Puedes agregar información a tus cookies como una fecha de vencimiento y características de seguridad como la directiva Secure y la bandera HttpOnly.

Set-Cookie: cookie_name=cookie_value; Expires=Wed, 17 Sep 2021 07:00:00 GMT; Secure; HttpOnly

La bandera HttpOnly significa que las cookies no pueden ser leídas o modificadas por el navegador. Y Secure significa que la cookie solo puede ser transferida a través de HTTPS. Estas son realmente importantes para proteger tu aplicación.

• Con Javascript es un poco más complicado gestionar las cookies. Tenemos una interfaz, document.cookie, que almacena nuestras cookies y puede ser reasignada. Por ejemplo, en un sitio que tiene Google Analytics instalado, y en la consola del desarrollador, podemos hacer:

console.log(document.cookie)
// Registra algo como "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"

// Este signo igual no funciona como esperas
document.cookie = "alligator=alligator_cookie_content;"
console.log(document.cookie)
// Registra "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"
// Observa que el código anterior añade la nueva cookie que creamos

// Una implementación básica de una interfaz de cookie podría verse así:
const createCookie = (name, value) => document.cookie = name + '=' + value + ';'
// Para una actualización real, primero verificaríamos si la cookie existe
const updateCookie = (name, value) => document.cookie = name + '=' + value + ';'
const deleteCookie = (name) => document.cookie = name + '=; Max-Age=-1;';  

Tipos de Cookies

Cookies de sesión

Las cookies de sesión a menudo se refieren a un tipo de cookie que existe hasta que se cierra el navegador. Para configurar una cookie de sesión, solo necesitas NO especificar ninguna fecha de vencimiento.

Por ejemplo, puedes almacenar el nombre de usuario en la cookie. Quien tenga acceso a la cookie tendrá acceso al nombre de usuario. Dado que está en la cookie, no necesitamos agregarlo a nuestras solicitudes.

Cookie persistente

Las cookies persistentes no son eliminadas por el navegador cuando el usuario lo cierra. Estas cookies tienen una fecha de caducidad que puedes establecer en tu servidor. Puedes configurar una cookie para que caduque en un día o en diez años.

Cookie de terceros

Podemos diferenciar las cookies que están en el mismo dominio de las cookies que provienen de proveedores de terceros. El ejemplo que dimos anteriormente con Google Analytics es un ejemplo de una cookie de terceros. Las cookies de terceros se pueden utilizar para rastrear las actividades de los usuarios. Para establecer una cookie de terceros, debes establecer ';domain=thirdpartydomain.com'.

Max-Age de la cookie vs Expiración

Las cookies suelen ser temporales, por lo que es posible que desees establecer una fecha de vencimiento precisa. Tienes dos estrategias:

• Use Expires y establezca una fecha de vencimiento fija. La fecha utiliza el formato de fecha HTTP: <nombre-del-día>, <día> <mes> <año> <hora>:<minuto>:<segundo> GMT. Por ejemplo, si queremos que nuestra cookie expire el 17 de septiembre de 2020, podemos hacer lo siguiente:

const jacksBirthday = new Date(2020, 8, 17);
document.cookie = 'jacksage=27; expires =' + jacksBirthday.toUTCString() + ';';

• El uso de ‘Max-Age’ no es compatible con todos los navegadores. Pero es la solución más sólida. Obliga a que la cookie expire un cierto tiempo (en segundos) después de que el cliente la reciba:

// Expira después de un día
const oneDayToSeconds = 24 * 60 * 60;
document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

? ¡Y eso es todo! Espero que ahora tengas una mejor idea de cómo usar cookies en el lado del cliente con JavaScript. Si tienes alguna pregunta, pregúntanos en Twitter. La próxima vez, veremos cómo gestionar sesiones con cookies y Express.js.