Cookies con Javascript 🍪

Las Cookies fueron creadas originalmente por Netscape para dale “memoria” a nuestro Web Servers y Browsers. HTTP es un protocolo Stateless (sin estado), esto quiere decir que el protocolo no requiere al servidor retener información o estados sobre cada usuario durante solicitudes múltiples. Pero algunas aplicaciones podrían necesitar rastrear el progreso del usuario, por ejemplo cuando un servidor web requiere costumizar el contenido de una web para un usuario. Algunas soluciones para estos casos pueden ser:

• HTTP Cookies. 🍪
• Server Side Sesions.
• Variables ocultas (cuando la página tiene un formulario).
• Reescritura de URL utilizando parámetros codificados por URI, por ejemplo, /index.php?session_id=some_unique_session_code.

En este articulo hablaremos de la primera solución, las Cookies. Y te explicaré como guardar, leer y borrar una cookie.

¿Que son las Cookies?! 🍪

Una cookie es simplemente un pequeño archivo de texto que es almacenado en nuestro explorador. Este contiene ciertos datos:

• Un name-value que contiene la información a almacenar.
• Una fecha de expiracion, que define cuando será borrada la cookie.
• El dominio y la ruta del servidor al cual se debe enviar.

En cuanto se hace una solicitud de una página al servidor, al que se debe enviar una cookie, esta es agregada al HTTP Header. Los servidores pueden leer esta información y decidir si tienes derecho a ver la página solicitada y recordar por ejemplo, que quieres ver el fondo azul con letra rosada. Así que cada vez que visites el sitio con la cookie, la información sobre ti estará disponible. Esto puede ser genial muchas veces, pero otras no tanto, ya que puede poner en “riesgo” tu privacidad. Afortunadamente, la mayoría de browsers te dejan costumizar tus cookies.

Las cookies también pueden ser leídas por Javascript, y se usan principalmente para almacenar las preferencias del usuario.

Name-Value

Cada cookie contiene una propiedad name-value, que lleva la información. El nombre de la cookie será utilizado para buscarla y leer la información.

Expiry date

Cada cookie tiene un Expiry Date o fecha de expiración, y esta será borrada una vez cumplida esa fecha. Si no se especifica esta fecha, la cookie será borrada una vez cerrado el explorador. Esta fecha debería estar definida en formato UTC (Greenwich).

Domain & Path

Cada cookie contiene además un dominio y una ruta. Esta información le dice al servidor a que dominio será enviada la cookie. Si no se especifica, será automáticamente el dominio desde el cual se está enviando la cookie.

Para entender mejor, vayamos directamente a un ejemplo. En la empresa en donde trabajo me pidieron ocultar por 30 días el anuncio para descargar la aplicación cuando el usuario lo cierre.

Lo resolví utilizando una cookie de la siguiente manera:

Veamoslo por partes.

setCookie 🍪

let setCookie = (name, value, days) => {
 let expires = "";
 if (days) {
  let date = new Date();
  date.setTime(date.getTime() + days * 24 * 60 * 60 * 1000);
  expires = "; expires=" + date.toUTCString();
 }
document.cookie = name + "=" + (value || "") + expires + "; path=/";
};

Este script asigna una variable que recibe una función, la función contiene 3 parametros, el nombre de la cookie, el valor y la cantidad de días que esta “vivirá”. Si el numero de días es asignado a 0, la cookie morirá una vez cerrado el explorador. Si asignas la cantidad de días de forma negativa, por ejemplo -1 la cookie será borrada inmediatamente.

Ahora, lo que se ejecuta dentro del codigo es un condicional que evalúa si se han enviado una cantidad de días para la cookie llamada. Si la cantidad de días fue pasada como parámetro, se crea una variable date que contiene la fecha actual. Después data.setTime toma el tiempo actual, le agrega la cantidad de días pasados (en milisegundos) y seteará el nuevo tiempo en el que debe expirar la cookie en milisegundos. Finalmente le da el formato de UTC/GMT a la variable expires que es el requerido por las cookies.

Si el numero seteado es 0 la variable expires no asigna ningún valor y la cookie será eliminada al cerrar el explorador. Finalmente, se crea la cookie de forma correcta en nuestro browser con document.cookie

getCookie 🍪

let getCookie = name => {
 let nameEQ = name + "=";
 let ca = document.cookie.split(";");
 for (var i = 0; i < ca.length; i++) {
 let c = ca[i];
 while (c.charAt(0) === " ") c = c.substring(1, c.length);
 if (c.indexOf(nameEQ) === 0) return c.substring(nameEQ.length,
     c.length);
 }
return null;
};

Este bloque de código, básicamente llama a la función y pasa como parametro el nombre de la cookie. Buscaremos la cookie por su nombre seguido del simbolo = así que creamos una nueva variable llamada nameEQ . A continuación dividimos document.cookie en semi columnas, ca se vuelve un array que contiene todas las cookies para este dominio y ruta.

Después hacemos un for a nuestro array, pasando por todas las cookies. Seteamos a c la cookie que será evaluada. El while remueve espacios en blanco usando el metodo substring() y ahora el string c empieza con el nombre de nuestra cookie actual. Si es el nombre de la cookie, la hemos encontrado. Lo ultimo que hacemos es devolver el value de la cookie. Ahí termina nuestra función.

Si después de evaluar nuestras cookies, no hemos encontrado la que buscamos, retornamos null.

closedApp

Todo el código que hemos evaluado hasta ahora, es totalmente re utilizable. El siguiente paso es crear mi cookie para el anuncio y entregar data y funcionalidad:

const close = document.getElementById("closeDescarga");
const downloadBanner = document.getElementById("descargaBanner");
close.addEventListener("click", function() {
 setCookie("closedApp", "true", 30);
 downloadBanner.style.display = "none";
});
const closedApp = getCookie("closedApp");
if (closedApp === null) {
 downloadBanner.style.display = "block";
} else {
 downloadBanner.style.display = "none";
}

Las dos constantes son los elementos con los que haré interacción. close es el botón con el que el usuario podrá cerrar el anuncio y downloadBanner es básicamente el anuncio.

Cuando el usuario da click en el button de close, se llama a la función setCookie() con el nombre de la función, el valor y la cantidad de días que vivirá esta cookie. La segunda linea simplemente oculta el anuncio. Ahora nuestra cookie existe en nuestro browser.

Podemos observar que nuestra cookie fue creada en la pestaña de “Aplication”. Estará ahí durante el tiempo que la hayamos seteado y después desaparecerá 😊

Lo siguiente llamamos la función getCookie() para evaluar si nuestra cookie aún existe. Si la cookie ha expirado, se ejecuta la información que le haya entregado. En este caso, mostrará el anuncio de nuevo, después de 30 días.

Es bastante simple, verdad? Puedes re utilizar el código pasando diferentes parámetros y creando diferentes cookies 🙌

Espero que este articulo te haya sido útil. Si tienes dudas puedes contactarme en Twitter ❤️ y Mil 🍪 a María Castro por las notitas y revies 💛