¿Qué son las cookies?

La Web está diseñada de modo que cada solicitud de un navegador web a un sitio web sea independiente. Por diseño, la Web no tiene "memoria". Cada vez que abres una página web, el sitio web que visitas no puede recordar la información de tu última sesión. Esto ayuda a que la Web sea eficiente, ya que no se necesita un mecanismo para hacer un seguimiento de las solicitudes y las respuestas.

Sin embargo, la naturaleza olvidadiza de la Web también presenta un problema. Por ejemplo, ¿cómo puede funcionar un carrito de compras si el sitio web en el que estás no puede recordar lo que acabas de agregar?

Las cookies se inventaron para resolver ese problema.

Las cookies les dan memoria a los sitios web

Cuando visitas una página de un sitio web, tu navegador web realiza solicitudes al servidor del sitio web para obtener los recursos incluidos en la página, como HTML, CSS, JavaScript o imágenes.

Los navegadores web y los sitios web interactúan siguiendo el protocolo HTTP. Este es un conjunto de reglas estandarizadas para la comunicación.

En respuesta a una solicitud HTTP de un recurso, el servidor del sitio web puede incluir información adicional llamada encabezados junto con el recurso en sí. Un encabezado Set-Cookie incluido en una respuesta HTTP le indica a tu navegador que almacene algo de texto: un nombre y un valor. Esto se conoce como cookie. Por ejemplo, el encabezado de respuesta Set-Cookie: cat=tabby le indica a tu navegador que almacene una cookie con el nombre "cat" y el valor "tabby".

Una vez que se establece esa cookie, las solicitudes posteriores de tu navegador al sitio web incluirán el encabezado Cookie: cat=tabby. El servidor del sitio web puede acceder a la cookie desde el encabezado de la solicitud y usar el valor.

Cómo funcionan las cookies: paso a paso

Imagina que visitas el sitio web cats.example. El sitio quiere mostrarte una imagen aleatoria de un gato y mantener un registro del gato que se te mostró.

En los siguientes pasos, se explica cómo hacerlo con cookies.

1. El navegador solicita un archivo

Visitas la página principal del sitio web cats.example.

Una vez que el navegador procesa el código HTML de la página principal, solicita los archivos de la página, incluido cat.jpg de cats.example.

Una solicitud HTTP a https://cats.example/cat.jpg

2. El servidor del sitio web responde

El servidor en cats.example responde con el archivo de imagen cat.jpg.

Con la respuesta, el servidor incluye un encabezado: Set-Cookie: cat=tabby.

Una respuesta HTTP de https://cats.example/cat.jpg, con un encabezado Set-Cookie: cat=tabby

3. El navegador recibe la respuesta

Tu navegador recibe el archivo de imagen y procesa el encabezado Set-Cookie: cat=tabby incluido en él.

Se almacena una cookie: nombre cat, valor tabby.

La cookie cat=tabby en un navegador web en una laptop.

4. El navegador realiza solicitudes adicionales

A partir de ahora, tu navegador incluirá el encabezado Cookie: cat=tabby con las solicitudes a cats.example.

Una solicitud HTTP a https://cats.example/cat.jpg, con un encabezado Cookie: cat=tabby

Cuando el servidor web cats.example recibe una solicitud, puede procesar la cookie y hacer lo que quiera con ese valor, como asegurarse de no volver a enviarte una imagen del mismo gato atigrado.

Este es el proceso completo de las cookies:

  1. Tu navegador solicita un archivo del servidor de un sitio web.
  2. El servidor puede incluir un encabezado, como Set-Cookie: cat=tabby, con el archivo que envía en respuesta a la solicitud.
  3. Cuando tu navegador recibe la respuesta, almacena la cookie.
  4. Con cada solicitud posterior, tu navegador envía la cookie al servidor en un encabezado Cookie: cat=tabby.


Diagrama de secuencia que muestra las solicitudes y respuestas entre un navegador web, cats.example y cats.example, y cómo se configuran y envían las cookies.

Cómo acceder a las cookies con JavaScript

En el ejemplo anterior, se usa el encabezado de respuesta Set-Cookie para establecer una cookie.

Las cookies también se pueden crear con JavaScript usando el método document.cookie.

Prueba la demostración: javascript-cookie.glitch.me.

Más información: Documento: propiedad de cookie.

¿Por qué necesitamos cookies?

En 1994, el ingeniero Lou Montulli trabajaba en la empresa de software Netscape, que luego creó el navegador web más popular de mediados de la década de 1990. Mientras tanto, una corporación de telecomunicaciones, MCI, intentaba crear un carrito de compras para una de las primeras tiendas en línea del mundo. MCI se comunicó con Montulli para explicarle su problema. Montulli respondió agregando una función a HTTP que permitía que un sitio almacenara una pequeña cantidad de texto en el navegador web de un usuario, un nombre y un valor: algo como cart-id=123. La llamó "cookie", ya que en esos días los programadores usaban la palabra "cookie mágica" para referirse a una pequeña porción de información adicional incluida en la comunicación de datos.

Montulli completó su trabajo sobre las cookies HTTP en menos de una semana. No sabía que las cookies se convertirían en un elemento fundamental para las funciones críticas de la plataforma web, como la publicidad, el acceso, los pagos y la detección de fraudes. Las cookies son una tecnología aparentemente simple que ha tenido efectos secundarios de gran alcance.

Usos de las cookies

Las cookies permiten que el navegador almacene una pequeña cantidad de información sobre el usuario para "recordar" algo en varias solicitudes. Las cookies tienen varios usos:

  • Administración de sesiones
    Permite que un sitio web reconozca a un usuario, por ejemplo, para mantener el estado de acceso en diferentes páginas.
  • Personalización
    Almacenar las preferencias del usuario, como el idioma, el tema o los elementos vistos recientemente, para personalizar la experiencia del sitio web
  • Seguimiento
    Históricamente, las cookies se han utilizado para hacer un seguimiento del comportamiento de los usuarios en los sitios web, para la publicidad segmentada y otros casos de uso.

Las cookies se usan principalmente para identificadores, en lugar de almacenar información directamente.

Por ejemplo, una cookie para tu carrito de compras en una tienda de mascotas en línea no mostrará los productos, sino que proporcionará un ID de cuenta que le permitirá a la tienda de mascotas buscar lo que hay en tu carrito en su almacenamiento de datos del servidor.

Una solicitud al servidor de la tienda de mascotas podría incluir un encabezado de cookie como el siguiente:

Cookie: _cart=CART1.2.34567890.123456789

Luego, el servidor puede buscar la cuenta de _cart en su almacén de datos y agregar otra información sobre la solicitud.

Más información