No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Manejo de Cookies en PHP para Personalización Web

3/22
Recursos

¿Qué son las cookies y para qué se utilizan?

Ah, las cookies. Todos nos hemos encontrado con esos pop-ups molestos que nos preguntan si aceptamos estas pequeñas entidades al navegar por internet. Pero, ¿alguna vez te has detenido a pensar qué son realmente? Las cookies son fragmentos de datos que un sitio web almacena en tu computadora. Y aunque esto suene invasivo, en esencia, las cookies guardan información no sensible sobre ti para mejorar tu experiencia de usuario.

Tales como:

  • Saber si ya visitaste un sitio web.
  • Ajustar precios según tus visitas previas.

La idea es que no pueden almacenarse cookies en tu navegador sin tu consentimiento, puesto que utilizan recursos de tu dispositivo.

¿Cómo se manejan cookies en PHP?

Para manejar cookies en PHP, contamos con una variable súper global llamada $_COOKIE, la cual nos permite leer cookies. Además, PHP nos proporciona funciones como setcookie() para establecer cookies. Esta función nos facilita definir cookies según nuestras necesidades, por ejemplo:

setcookie("nombre_de_cookie", "valor_de_cookie", $expiration_time, "/path", "website_domain", $secure, $http_only);

Con setcookie(), podemos definir si una cookie estará disponible en el front-end, si será exclusiva de sitios seguros, o en qué directorios específicos se puede acceder a ella.

¿Cómo se crean cookies en una aplicación práctica?

Pasemos del concepto a la práctica. Imagina que queremos personalizar el color del fondo de nuestro sitio web para cada usuario. Aquí es donde las cookies muestran su potencial.

Primero, creamos una simple estructura HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ejemplo de Cookies</title>
    <link rel="stylesheet" href="style.css">
</head>
<body style="background-color: <?php echo $color; ?>">
    <header>
        <img src="logo.webp" alt="Ejemplo de logo">
    </header>
</body>
</html>

Y en PHP, determinamos si usar un color personalizado o el predeterminado:

// Descomentar para definir la cookie.
// setcookie("header_color", "#12373D", time() + (86400 * 30), "/");

$color = $_COOKIE['header_color'] ?? '#121F3D';

echo "<body style='background-color: $color'>";

Paso a paso

  1. Definición de la Cookie: Utilizando setcookie(), almacenamos el color preferido del usuario.
  2. Lectura de la Cookie: Accedemos a las cookies establecidas para determinar el color del fondo.
  3. Personalización: La cookie definida solo afecta al usuario en su navegador, permitiendo experiencias personalizadas.

Así, al testear en una pestaña de incógnito (sin cookies previas), el color volvería al predeterminado, mostrando cómo las cookies son específicas para cada sesión de usuario.

¡Adelante! Sigue explorando más sobre cookies y descubre cómo pueden mejorar o complicar las experiencias de tu aplicación web. La personalización que ofrecen es poderosa, pero siempre recuerda usarla con responsabilidad y transparencia hacia el usuario.

Aportes 5

Preguntas 2

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Superglobal $_COOKIE para obtener las cookies guardadas.
Métodos setcookie() o setrawcookie() para definir una cookie. Éstos aceptan los siguientes argumentos:

  • name:
  • value:

Yo uso mucho el navegador Brave, acepta las cookies de los sitios pero nunca deja que se compartan con sitios terceros, evitando que nos llenen de publicidad, como sucede por ejemplo con mercado libre.

PHP named arguments funciona a partir de la versión 8.0

Uy, no me sabia lo del doble signo de interrogación como operador ternario, yo siempre escribia $color = isset($_COOKIE[‘header_color’]) ? $_COOKIE[‘header_color’] : “”

Codigo de la clase:

<?php
setcookie(
    name: "header_color",
    value: "#12373d"
);

$color = $_COOKIE["header_color"] ?? "#121f3d";

?>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Platzi</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header
        style = "background : <?= $color ?>">
    
        <img src="logo.webp" alt="Platzi">
    </header>
</body>
</html>