Guía completa para manejar Cookies con JavaScript

Las cookies son datos que un servidor web envía y almacena en el navegador del usuario. Las cookies permiten que el sitio web recuerde información del usuario, lo cual es útil para funciones como: sesiones de usuario, guardar preferencias y realizar seguimiento de actividad.

Funcionamiento de las cookies

Creación y almacenamiento: Cuando un usuario visita una web, el servidor puede enviar una cookie al navegador, esta se guarda en el navegador del usuario y se envía al servidor en cada solicitud posterior.

Contenido de una cookie: Las cookies contienen datos del tipo clave-valor, además de las siguientes propiedades:

expires: indica la fecha de expiración de la cookie.
path: ruta asociada a la cookie, sólo esta ruta se puede acceder a la cookie.
domain: dominio asociado a la cookie, sólo este dominio puede acceder a la cookie.
secure: indica que la cookie se debe enviar en conexiones seguras.
HttpOnly: la cookie es accesible sólo en peticiones HTTP, no se puede leer con JavaScript.

Luego una cookie se crea con los siguientes headers:


Set-Cookie: username=JohnDoe; expires=Wed, 1 July 2024 07:28:00 GMT; path=/; Secure; HttpOnly

Manejar cookies en JavaScript

Las cookies se guardan en la propiedad document.cookie del navegador, por lo que se puede manipular (crear, editar, eliminar) accediendo directamente a esta propiedad.

1. Crear Cookies

Para crear una cookie en JavaScript, asignamos una cadena de texto con el siguiente formato:


document.cookie = "username=JohnDoe; expires=Wed, 1 July 2024 07:28:00 GMT; path=/";

2. Leer Cookies

Para leer todas las cookie se puede acceder a la propiedad document.cookie.

let cookies = document.cookie;

Para leer una cookie se debe separar las cookies y filtrar sólo la que se necesita, para ello creamos una función que se encargue de este proceso:


function getCookie(name) {
    let matches = document.cookie.match(new RegExp(
        "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
    ));
    return matches ? decodeURIComponent(matches[1]) : undefined;
}

let usuario = getCookie('username');

3. Actualizar Cookies

Para actualizar una cookie se crea una cookie pero con el mismo nombre de la cookie que se quiere modificar:


document.cookie = "username=DanielDoe; expires=Thu, 1 July 2025 07:28:00 GMT; path=/";

4. Borrar una Cookie

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


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

Clase para manejar Cookies

Con lo que hemos visto se puede crear una clase que se encargue del manejo de las cookies, esta clase tendrá los siguientes métodos:

setCookie: crear o modificar una nueva cookie.
getCookie: buscar y devolver el valor de una cookie.
deleteCookie: buscar y eliminar un cookie.

Con esto en mente creamos nuestra clase:


// file: CookieManager.js
class CookieManager {

    // set cookie
    static setCookie(name, value, options = {}) {
        let contentCookie = encodeURIComponent(name) + "=" + encodeURIComponent(value);

        if (options.expires) {
            contentCookie += "; expires=" + options.expires.toUTCString();
        }

        if (options.path) {
            contentCookie += "; path=" + options.path;
        }

        if (options.domain) {
            contentCookie += "; domain=" + options.domain;
        }

        if (options.secure) {
            contentCookie += "; secure";
        }

        document.cookie = contentCookie;
    }

    // read cookie
    static getCookie(name) {
        let filter = /([.$?*|{}\(\)\[\]\\\/\+^])/g;
        let matches = document.cookie.match(new RegExp(
            "(?:^|; )" + encodeURIComponent(name).replace(filter, '\\$1') + "=([^;]*)"
        ));
        return matches ? decodeURIComponent(matches[1]) : undefined;
    }

    // delete cookie
    static deleteCookie(name, options = {}) {
        let updatedOptions = {
            ...options,
            expires: new Date(0)
        };

        this.setCookie(name, "", updatedOptions);
    }
}

Luego, podemos usar esta clase de la siguiente manera:


// Crear una cookie
CookieManager.setCookie('name', 'Kodetop', {expires: new Date(2024, 6, 1)});

// Leer una cookie
console.log(CookieManager.getCookie('name'));

// Borrar una cookie
CookieManager.deleteCookie('name', {path: '/'});

Consideraciones de Seguridad

Seguridad: Establecer el atributo Secure asegura que la cookie solo se envíe a través de conexiones HTTPS.

Expiración: Establecer una fecha de expiración es importante. Si la cookie no tiene fecha de expiración se eliminará cuando el navegador se cierre.

Alcance: Definir el path y domain asegura que las cookies solo sean enviadas a partes específicas del sitio web.

Conclusiones

Las cookies son herramientas poderosas para almacenar datos en el navegador del usuario, pero deben manejarse con cuidado para asegurar la privacidad y seguridad del usuario. Con JavaScript, podemos crear, leer, actualizar y borrar cookies de manera efectiva, adaptándolas a las necesidades específicas de nuestras aplicaciones web.