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.

¿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

1. 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 usuario con el valor Juan que expira el 31 de diciembre de 2024 y es válida en todo el dominio (path=/).

2. 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"

1<div id="value">
2   <!-- Aquí se mostrará el valor almacenado en localhost -->
3</div>

1document.cookie = "usuario=Juan; expires=Fri, 31 Dec 2024 12:00:00 UTC; path=/";
2let cookies = document.cookie;
3document.querySelector('#value').textContent = cookies;

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"

3. 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 usuario estableciendo 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 (Lax o None).

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

• Cookies son pequeños fragmentos de datos almacenados en el navegador del usuario y enviados al servidor con cada solicitud.
• Se utilizan para almacenar información persistente como preferencias, inicios de sesión, y más.
• Puedes crear, leer, y eliminar cookies usando document.cookie.
• Las cookies pueden tener atributos adicionales para controlar su comportamiento, como expires, path, Secure, HttpOnly, y SameSite.

Las cookies son una herramienta fundamental para gestionar la persistencia de datos en la web y mejorar la experiencia del usuario al recordar información entre sesiones.