Introducción a las cookies: comprensión y trabajo con cookies de JavaScript

Preslav Dobrev2022-10-25 · 8 min read

Introducción a las cookies: comprensión y trabajo con cookies de JavaScript

Las cookies del navegador, o cookies HTTP, son archivos de texto compuestos por pequeños fragmentos de datos. Los sitios web utilizan esta información para rastrear el recorrido de un usuario, lo que les permite ofrecer funciones personalizadas y mejorar su experiencia de navegación. Las cookies pueden almacenar hasta 4096 bytes de datos. Sin embargo, podemos añadir un número limitado de cookies por dominio, dependiendo del navegador.

Una comprensión básica de las cookies HTTP es esencial para cualquier usuario de Internet, ya sea que solo esté navegando por diversión o ganándose la vida con ello. Esta guía le presentará las cookies y sus diversos tipos en detalle. Nuestro enfoque es ayudarle a comprender y trabajar con cookies de JavaScript.

¡Empecemos!

Requisitos previos

Para seguir este tutorial, debe tener:

Un conocimiento básico de JavaScript.

Primeros pasos con las cookies de JavaScript

Trabajar con cookies de JavaScript es sencillo. Permite crear, editar y recuperar cookies sin esfuerzo. Además, podemos utilizar la propiedad cookie del objeto Document para manipular y restringir las propiedades de las cookies como el nombre, el valor y la longitud, por nombrar algunas.

Tipos de cookies

Primero, echemos un vistazo a los diferentes tipos de cookies:

Cookies de origen

Estas cookies se crean y almacenan cada vez que un usuario visita un sitio web. Permiten a los propietarios de sitios web obtener información detallada sobre los datos de los usuarios y brindarles una mejor experiencia de navegación.

Cookies persistentes

Para este tipo de cookie, el emisor asigna una fecha de caducidad. Por lo tanto, se utiliza durante un período de tiempo mucho más largo. Esto significa que incluso si cierra su navegador, la cookie permanecerá en él. Además, los datos se devuelven al emisor cada vez que visita el sitio web que creó la cookie.

Cookies de sesión

Estas cookies son solo temporales y se almacenarán en la memoria de su navegador mientras esté abierto. Al cerrarlo, la cookie se elimina del historial de su navegador, lo que las convierte en un riesgo de seguridad menor. No es necesario especificar una fecha de caducidad.

Cookies de terceros

Las cookies de terceros son creadas por un sitio que no está visitando actualmente. En su mayoría, estas cookies son útiles para rastrear a un usuario que ha hecho clic en un anuncio, asociándolo con el dominio que lo refirió.

Creación de cookies

Podemos crear cookies utilizando dos métodos:

Enviar Set-Cookie en la cabecera de respuesta HTTP de respuesta. Dependiendo de las tecnologías utilizadas para el servidor web, puede gestionar las cabeceras de las cookies utilizando herramientas y bibliotecas. Las cookies pueden contener información como una fecha de caducidad y características de seguridad como la directiva secure y el HttpOnly flag.

HttpOnly: Indica que el navegador no puede leer ni modificar las cookies.
Secure: Esto indica que la cookie solo se puede enviar a través de HTTPS.

Utilizando la propiedad document.cookie de JavaScript, podemos crear, leer y eliminar cookies.

Paso 1 — Crear una cookie

A continuación, demostraremos el proceso de creación de una cookie de JavaScript. Las cookies se guardan en formato de par nombre-valor:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

In the above cookie, UserName es el nombre de la cookie, mientras que CloudSigma es el valor almacenado en ella.

La cookie tiene una fecha de caducidad. Por defecto, se elimina automáticamente al cerrar el navegador. También puede añadir una fecha de caducidad a su cookie:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Por defecto, las cookies pertenecen a la página actual. Sin embargo, también podemos especificar la cookie con la ayuda del parámetro path :

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Cookie Max-Age vs Cookie Expire

Dependiendo de sus necesidades, puede utilizar estas dos estrategias para establecer la fecha de caducidad de una cookie. La diferencia entre las dos es que expires establece una fecha de caducidad en la que se elimina la cookie. Por el contrario, el max-Age establece el tiempo en segundos en que se eliminará una cookie. Desafortunadamente, max-age no es compatible con todos los navegadores.

Ejemplo de configuración de una cookie usando expires y max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // en milisegundos
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // en milisegundos

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

Step 2 — Reading a Cookie

El document.cookie devuelve una cadena. Si hay dos o más cookies, usamos un punto y coma( ;) y un espacio para separarlas.

Usamos el split() para extraer una cookie individual de una lista de cookies. Este método divide la lista en pares de nombres y valores individuales. Una vez hecho esto, puedes buscar la cookie de destino que deseas leer:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Bienvenido de nuevo, " + UserName);
} else {
    firstName = prompt("Ingresa tu UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Bienvenido de nuevo, " + UserName);

} else {

firstName = prompt("Ingresa tu UserName:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Comprendamos las funciones que creamos en el código:

Nombre de la función	Descripción
setCookie()	Crea una cookie
getCookie()	Lee el valor de la cookie
checkCookie()	Verifica si el UserName está configurado o no.

En el siguiente paso, aprenderemos cómo actualizar una cookie.

Step 3 — Updating a Cookie

Podemos establecer nuevos valores para los atributos de nuestra cookie. En nuestro ejemplo, actualicemos la suscripción del usuario de un plan mensual a un plan trimestral.

Actualicemos el atributo max-age de la cookie UserName de 30 días a 180 días:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

Step 4 — Deleting a Cookie

Cambiar el nombre de la cookie con el mismo nombre eliminará la cookie que deseas borrar. Podemos eliminar una cookie estableciendo el max-age en 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Además, si la cookie tiene una ruta especificada, elimínela especificándola:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Conclusión

Las cookies son necesarias para que un sitio web funcione correctamente. En este tutorial introductorio, analizamos en detalle las cookies y sus diferentes tipos. Además, hemos aprendido a trabajar con cookies con la ayuda de un ejemplo. Ahora que se siente cómodo utilizando cookies de JavaScript, comience a crear cookies personalizadas para aprender y explorar más sobre el tema.

Además, hay muchos tutoriales sobre JavaScript y desarrollo web que puede explorar desde nuestro blog:

¡Feliz computación!

Preslav Dobrev

Autor · CloudSigma

Preslav Dobrev es diseñador creativo en CloudSigma, centrado en una identidad empresarial coherente mediante el uso de canales de marketing tradicionales e innovadores. Es experto en fusionar la visión artística con el marketing estratégico para crear narrativas de marca impactantes.