Trabajar con cookies de forma sencilla

Local storage nos permite trabajar con datos persistentes en el navegador de una forma muy sencilla, pero estamos atados a la compatibilidad o a el espacio que nos permita el navegador, algunos navegadores como safari bloquean el eso de local storage en el modo incógnito, lo que puede resultar en errores inesperados en nuestra aplicación.

Por tanto el uso de cookies nos permite dar un soporte mas extendido y que funciona en navegadores que bloquean el almacenamiento local.

Obtener cookies.

    function parseCookies () {
    return document.cookie.split('; ').reduce((acc, cookie) => {
        const [key, value] = cookie.split('=');
        return {...acc, [key]: value};
    }, {});
}

Esta función nos permite obtener todas las cookies, que no tengan la etiqueta httpOnly, la etiqueta httpOnly significa que esta cookie no puede ser accedida ni modificada vía JS por lo que se enviara en todas las peticiones y solo podrá ser modificada por el servidor o desde la consola del navegador.

Dadas las cookies de este blog obtendríamos el siguiente resultado.

    parseCookies()
    {
        intercom-id-gtevucvp: "cookieValue"
    }

Trabajar con las cookies de esta forma nos permite crear una función que devuelva una cookie en concreto al igual que localStorage.getItem

    function getCookieByName (name) {
        const cookies = parseCookies();
        return cookies[name];
    }
    getCookieByName('intercom-id-gtevucvp'); // "cookieValue"
    getCookieByName('SomeCookieName'); // undefined

Crear cookies.

Ahora vamos a crear nuestras cookies.

    function createCookie (name, value, days= 3) {
        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=/';
    }
    createCookie('myCookieName', 'This is the value');
    getCookieByName('myCookieName'); // "This is the value"

Ahora ya podemos crear cookies de una manera muy sencilla, para actualizar una cookie lo único que hay que hacer es crearla de nuevo con un nuevo valor, imagina que tienes una cookies cuyo valor es un array y queres añadir un elemento, seria así de simple.

    const NewItem = 'valueThree';
    const OldValue = JSON.parse(getCookieByName('myCookieName'));
    const NewValue = JSON.stringify(OldValue.concat(NewItem));
    createCookie('myCookieName', NewValue);
    getCookieByName('myCookieName'); // "["valueOne","valueTwo","valueThree"]"

Debido a que el valor de las cookies debe estar en formato JSON deberemos tratar sus datos como tal, las funciones de creación de lectura podrían ser algo mas complejas y dotarlas de la posibilidad de automatizar esta tarea.

Una diferencia de las cookies con respecto a el almacenamiento local es la expiración, todas las cookies tienen una fecha de expiración, una vez esta fecha se sobrepase el navegador eliminara la cookie, esto nos lleva al siguiente paso.

Eliminar cookies.

Las cookies se eliminan forzando la caducidad de la misma.

    function eraseCookie (name) {
        createCookie(name, '', -1);
    }
    eraseCookie('myCookieName');
    getCookieByName('myCookieName'); // undefined

Conclusión

Si usas local storage, pude que algún navegador te presente algún problema por lo que el uso de cookies te puede facilitar la vida. Hay muchos debates por internet sobre el uso de cookies o local storage, yo no quiero meterme con ninguno de los 2 metodos, cada uno tiene sus pros y contras, pero en caso de que necesites trabajar con cookies, hazte un favor y facilita tu vida generalizando el problema y trabajando de una forma unificada