Introducción a Cookie

por

En este artículos vamos a realizar una introducción a cookie en PHP y JavaScript: una de las formas de guardar información en la web. Este artículo forma parte de la serie Session, Cookie y Storage: tecnologías que permiten a los sitios web recordar preferencias del usuario, el estado de la sesión o datos importantes mientras navegas.

Las cookies son pequeños archivos de texto que los sitios web almacenan en el navegador del usuario y que luego se pueden enviar de vuelta al servidor si son requeridas. A diferencia de las sesiones, las cookies se guardan en el cliente, lo que permite mantener información incluso después de cerrar el navegador (dependiendo de la fecha de expiración). Las cookies son ideales para guardar preferencias, datos de sesión extendida y seguimiento del usuario, aunque requieren medidas de seguridad para proteger la privacidad. En esta introducción a cookie veremos cómo crear, leer y eliminar cookies tanto en PHP como JavaScript.

Introducción a Cookie con PHP

El lenguaje PHP ofrece funciones nativas para crear, leer y eliminar cookies, donde su función principal es:

  • setcookie(nombre, valor, expiración, ruta)
    • Nombre: el identificador de la cookie.
    • Valor: la información que queremos guardar (siempre en formato de texto).
    • Expiración: cuándo caduca la cookie, expresado en segundos desde la hora actual.
    • Ruta: especifica la parte del dominio donde la cookie estará disponible (si ponemos /, será válida en todo el sitio).

Crear cookies en PHP

Este código crea la cookie «usuario» con el valor «Juan», válida durante 7 días, y accesible en todo el dominio de la web «/».

<?php
  // Crear una cookie llamada 'usuario' válida por 7 días
  setcookie("usuario", "Juan", time() + (7 * 24 * 60 * 60), "/");
?>

Leer cookies en PHP

Después de crear una cookie podemos recuperar su valor mediante el nombre que le hemos asignado y la variable global de PHP $_COOKIE[nombre], el cual es un array asociativo. En este caso comprobamos si la cookie existe (isset) para saludar a los nuevos usuarios (sin cookie) o a los usuarios ya reconocidos (con cookie).

<?php
  if(isset($_COOKIE['usuario'])) {
    echo "Bienvenido, " . $_COOKIE['usuario'];
  } else {
    echo "Usuario invitado";
  }
?>

Eliminar cookies en PHP

Para eliminar una cookie simplemente debemos poner un tiempo de expiración que ya se haya cumplido, por ejemplo el tiempo actual menos 1 hora (en segundos) y el sistema la elimina automáticamente. Esto suele usarse en procesos de logout o para limpiar datos de preferencias.

<?php
  // Para eliminar, se establece un tiempo pasado
  setcookie("usuario", "", time() - 3600, "/");
?>

Introducción a Cookie con JavaScript

En JavaScript, las cookies se gestionan mediante la propiedad document.cookie. A diferencia de PHP, no existe una API nativa tan estructurada como setcookie(), sino que trabajamos directamente con cadenas de texto que contienen las cookies.

Crear cookies en JavaScript

Este código crea la cookie «usuario» con el valor «Juan», válida durante 7 días, y accesible en todo el dominio de la web «/».

// Crear una cookie simple válida por 7 días
document.cookie = "usuario=Juan; max-age=" + 7*24*60*60 + "; path=/";

Leer cookies en JavaScript

document.cookie devuelve todas las cookies en una sola cadena de texto. Para acceder a un valor concreto, es habitual usar una función que las separe por nombre:

function getCookie(name) {
    const value = "; " + document.cookie;
    const parts = value.split("; " + name + "=");
    if (parts.length === 2) return parts.pop().split(";").shift();
}
console.log(getCookie("usuario")); // Juan

Eliminar cookies en JavaScript

Podemos eliminar una cookie en JavaScript volviendo a crear la cookie con el mismo nombre pero estableciendo su duración en 0 segundos.

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

Introducción a Cookie

En esta introducción a cookie hemos visto son una de las piezas más veteranas y a la vez más útiles en el desarrollo web. Tanto en PHP como en JavaScript, su función es guardar pequeños fragmentos de información en el navegador del usuario para recordarla en visitas posteriores. Ya sea gestionadas en el servidor a través del array $_COOKIE de PHP o manipuladas directamente en el cliente con document.cookie en JavaScript, estas nos permiten mantener preferencias, personalizar la experiencia y ofrecer una navegación más fluida. Los casos de uso más comunes donde se suelen usar cookies son:

  • Recordar login: se utiliza para recordar a los usuarios «logueados» al acceder de nuevo a las páginas web y no tener que identificarse cada vez.
  • Preferencias de usuario: se utiliza para recordar las preferencias del usuario en la página web como el tema oscuro/claro, el idioma idioma, etc.
  • Seguimiento temporal: se utiliza para seguir la actividad entre sesiones de navegador.

Cuando utilizamos cookies, podemos utilizar una serie de buenas prácticas para minimizar el riesgo a ataques y que puedan acceder a datos sensibles:

  • Usar HttpOnly para cookies que no deben ser accesibles desde JavaScript (reduce riesgo de XSS).
  • Usar Secure para que solo se envíen por HTTPS.
  • Evitar almacenar datos sensibles como contraseñas; mejor usar identificadores o tokens.
  • Limitar la duración de la cookie según el propósito.

Aunque en esta introducción a Cookie hemos hablado de sus ventajas, también es importante usarlas con precaución. El almacenamiento de información sensible en cookies puede exponer datos si no se aplican las medidas de seguridad adecuadas (como HttpOnly, Secure o SameSite). Entender bien cómo funcionan tanto en el backend como en el frontend te permitirá aprovechar su potencial al máximo, evitando riesgos innecesarios y mejorando la experiencia del usuario en tus aplicaciones web.

¡ Espero que este artículo sea de vuestro interés !

Deja un comentario