lunes 14 octubre 2024

Cómo trabajar con cookies en JavaScript Vanilla

JavaScript Vanilla (es decir, sin librerías externas) ofrece una forma simple de gestionar las cookies a través del objeto document.cookie. A continuación, veremos cómo crear, leer, actualizar y eliminar cookies.

1. Crear cookies

Para crear una cookie en JavaScript, asignamos un valor al objeto document.cookie. Una cookie tiene un formato básico que sigue la estructura clave-valor:

document.cookie = "nombre=valor";

Ejemplo básico:

document.cookie = "usuario=Juan";

Esto almacenará una cookie con el nombre "usuario" y el valor "Juan".

Configurar la expiración de una cookie

Por defecto, las cookies se eliminan cuando el usuario cierra el navegador. Para hacer que una cookie sea persistente, es necesario establecer una fecha de expiración utilizando el atributo expires o max-age.

expires: Define una fecha y hora específica para la expiración.
max-age: Establece la duración en segundos a partir del momento actual.

##### Ejemplo con expires:

let fechaExpiracion = new Date();
fechaExpiracion.setTime(fechaExpiracion.getTime() + (7 * 24 * 60 * 60 * 1000)); // 7 días
document.cookie = "usuario=Juan; expires=" + fechaExpiracion.toUTCString() + "; path=/";

##### Ejemplo con max-age:

document.cookie = "usuario=Juan; max-age=604800; path=/"; // 7 días

En ambos casos, la cookie permanecerá activa durante 7 días.

Establecer el `path`

El atributo path define el nivel de la URL en el cual la cookie será accesible. Por ejemplo, si estableces path=/, la cookie estará disponible en todas las páginas del sitio web. Si no se especifica, la cookie será accesible solo en la ruta donde se creó.

document.cookie = "usuario=Juan; path=/"; // La cookie es válida en todo el sitio

2. Leer cookies

Las cookies en JavaScript se almacenan en una sola cadena, separadas por punto y coma. Para leerlas, usamos document.cookie, pero primero debemos procesar esta cadena para extraer el valor de la cookie que nos interesa.

Leer todas las cookies:

console.log(document.cookie); // Muestra todas las cookies en el formato "clave1=valor1; clave2=valor2"

Leer una cookie específica

Para obtener el valor de una cookie específica, necesitamos dividir la cadena resultante de document.cookie y buscar la clave deseada. Aquí te muestro una función para obtener el valor de una cookie:

function obtenerCookie(nombre) {
  let nombreEQ = nombre + "=";
  let cookiesArray = document.cookie.split(';');
  
  for (let i = 0; i < cookiesArray.length; i++) {
    let cookie = cookiesArray[i].trim();
    if (cookie.indexOf(nombreEQ) === 0) {
      return cookie.substring(nombreEQ.length, cookie.length);
    }
  }
  
  return null;
}

Ejemplo de uso:

let valorUsuario = obtenerCookie("usuario");
console.log(valorUsuario); // Muestra "Juan" si la cookie existe

3. Actualizar cookies

Las cookies no pueden actualizarse directamente. Para modificar una cookie existente, simplemente debes crear una nueva cookie con el mismo nombre y configurar un nuevo valor. Esto sobrescribirá la cookie anterior.

Ejemplo:

document.cookie = "usuario=Maria; max-age=604800; path=/";

Este código cambiará el valor de la cookie "usuario" de "Juan" a "Maria" y extenderá su duración por otros 7 días.

4. Eliminar cookies

Para eliminar una cookie, simplemente establecemos su fecha de expiración en una fecha pasada.

document.cookie = "usuario=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";

Este código elimina la cookie "usuario" ya que su fecha de expiración es inválida.

5. Buenas prácticas al trabajar con cookies

Limitar el tamaño de las cookies: Las cookies deben ser pequeñas, idealmente menos de 4 KB, para evitar problemas de rendimiento.
Usar secure: El atributo secure garantiza que las cookies solo se envíen a través de conexiones HTTPS, lo que protege los datos.

document.cookie = "usuario=Juan; secure; path=/";

Utilizar HttpOnly desde el servidor: Aunque no se puede configurar directamente con JavaScript, el atributo HttpOnly se debe utilizar en las cookies sensibles (como tokens de autenticación) para evitar que sean accesibles desde JavaScript.
Establecer SameSite: Este atributo define cómo las cookies se deben enviar con solicitudes de sitios de terceros, lo que mejora la seguridad contra ataques CSRF.

document.cookie = "usuario=Juan; SameSite=Lax; path=/";

Conclusión

Las cookies son una herramienta poderosa para almacenar información en el navegador y permitir interacciones personalizadas con el usuario. Aunque la manipulación de cookies en JavaScript es relativamente sencilla, es crucial seguir buenas prácticas de seguridad para proteger la información del usuario y cumplir con las normativas de privacidad.

Con JavaScript Vanilla, podemos crear, leer, actualizar y eliminar cookies de manera eficiente y directa. Si bien su uso es esencial para muchas aplicaciones web, siempre debemos tener en cuenta las implicaciones de seguridad y privacidad.

Etiquetas:

javascript

Creado por:

Jorge García

Fullstack developer