¿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 es una de las tecnologías más importantes de la web.

Veamos un poco de qué se trata, ¿de acuerdo?

Conceptos básicos sobre las cookies del navegador

Las cookies de los navegadores se introdujeron en la web para mantener información persistente sobre el usuario. El primer caso de uso fue comprobar 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 creas que sea mejor para tu aplicación. La cookie de Google Analytics _gaes probablemente one of || thela más común y suele tener este aspecto:

• Nombre : _ga
• Valor : GA1.3.210706468.1583989741
• Dominio : .ejemplo.com
• Camino : /
• Caduca / Edad máxima : 2022-03-12T05:12:53.000Z

Las cookies pueden almacenar hasta 4096 bytes de datos (esto incluye nombre, valor, dominio, fecha de vencimiento y cualquier otra cosa que pueda incluir). Puede agregar una cantidad limitada de cookies por dominio que varía según su navegador.

¿Cómo se crean las cookies?

Hay dos formas principales de crear cookies:

• ConHTTPPuede enviar Set-Cookiesu encabezado de respuesta HTTP. Según las tecnologías que utilice para su servidor web, puede utilizar diferentes herramientas y bibliotecas para administrar los encabezados de cookies. Estas herramientas deberían crear respuestas HTTP que se verán aproximadamente así:

HTTP/2.0 200 OKContent-type: text/htmlSet-Cookie: alligator_name=barrySet-Cookie: tasty_cookie=strawberry... More http Content

Puede agregar información a sus cookies, como una fecha de vencimiento y características de seguridad como laSegurodirectiva y laSólo HTTPbandera.

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

ElSólo HTTPFlag significa que el navegador no puede leer ni modificar las cookies. Secure significa que las cookies solo se pueden transferir a través de HTTPS. Estos son muy importantes para proteger su aplicación.

• ConJavascriptEs un poco más complicado administrar las cookies. Tenemos una interfaz, document.cookie, que almacena nuestras cookies y se pueden reasignar. Por ejemplo, en un sitio que tiene instalado Google Analytics y en la consola para desarrolladores, podemos hacer lo siguiente:

console.log(document.cookie)// logs something like "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741"// This equal sign does not work as you expectdocument.cookie = "alligator=alligator_cookie_content;"console.log(document.cookie)// logs "_ga=GA1.3.210706468.1583989741; _gid=GA1.3.1734708005.1583989741; alligator=alligator_cookie_content"// Notice that the previous piece of code appends the new cookie we created// A rough implementation of a cookie interface could look like this:const createCookie = (name, value) = document.cookie = name + '=' + value + ';'// For a real update we would first check if the cookie existsconst 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 suelen ser un tipo de cookies que existen hasta que se cierra el navegador. Para configurar una cookie de sesión, solo es necesario NO especificar ninguna fecha de vencimiento.

Por ejemplo, puedes almacenar el nombre de tu usuario en la cookie. Quien tenga acceso a la cookie tendrá acceso al nombre del usuario. Como está en la cookie, no necesitamos añadirlo a nuestras solicitudes.

Session cookieses una expresión confusa. Las cookies de sesión también se refieren a las cookies que se utilizan para administrar sesiones. Las cookies que se eliminan cuando se cierra el navegador no son las únicas cookies que puede utilizar para administrar sesiones.

Cookie persistente

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

Cookies de terceros

Podemos diferenciar las cookies que se encuentran en el mismo dominio de las cookies que provienen de proveedores externos. El ejemplo que hemos dado anteriormente con Google Analytics es un ejemplo de una cookie de terceros. Las cookies de terceros se pueden utilizar para realizar un seguimiento de las actividades del usuario. Para configurar una cookie de terceros, debe configurar ';domain=thirdpartydomain.com'.

Antigüedad máxima de las cookies frente a caducidad

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

• Utilice Expiresy establezca una fecha de vencimiento fija. La fecha utiliza el formato de fecha HTTP: day-name, day month year hour:minute:second GMT. Por ejemplo, si queremos que nuestra cookie caduque 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 caduque después de un tiempo determinado (en segundos) después de que el cliente la reciba:

// Expires after one dayconst oneDayToSeconds = 24 * 60 * 60;document.cookie =  'daily_cookie=session_identifierXYZ; max-age = ' + oneDayToSeconds + ';';

¡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 administrar sesiones con cookies y Express.js.