Ejemplo Javascript cartel Cookies

Si vas a diseñar una página web donde posiblemente entrarán navegantes europeos, y quieres usar Cookies, no te quedará otra que avisar a tus usuarios si no quieres infringir el artículo 22 de la Ley 34/2002. Es más, deberán darte su consentimiento de ante mano. Para cumplir esta agradable ley habrá que remangarse y programar alguna lógica. Lamentablemente no siempre disponemos de un Back-End (en el caso de visita mi otro artículo) donde nos apoyemos si es puramente HTML/CSS o Javascript (VueJS, ReactJS, Angular, vainilla…), lo que nos va a empujar a recurrir al ingenio. O lo que es lo mismo, usar el potencial de Javascript para guardar la decisión del visitante y evitar que vuelva a mostrarse el cartel o aviso.

He preparado un ejemplo sencillo en Javascript vainilla, o ES6, totalmente comentado y minimalista con las siguientes características.

HTML

Las etiquetas son maleables a tu diseño, las puedes aumentar o reducir a necesidad. No obstante debes evitar cambiar las clases que usa el script: cookies, cookies__boton--no y cookies__boton--si.

<section class="cookies">
    <h2 class="cookies__titulo">¿Quieres nuestras Cookies?</h2> 
    <p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
    <div class="cookies__botones">
        <!-- Botón de negación --> 
        <button class="cookies__boton cookies__boton--no">No</button>
        <!-- Botón de afirmación --> 
        <button class="cookies__boton cookies__boton--si">Si</button>
    </div>
</section>  

Javascript

Ahora llegamos al código para nuestro Front-End. En Javascript puro se recoge las etiquetas anteriores, y guarda en un localstorage si ha sido pulsado en si o no.

document.addEventListener('DOMContentLoaded', () => {

    let cookies = () => {
        //======================================================================
        // COOKIES
        //======================================================================

        //-----------------------------------------------------
        // Variables
        //-----------------------------------------------------
        let seccionCookie = document.querySelector('.cookies');
        let cookieSi = document.querySelector('.cookies__boton--si');
        let cookieNo = document.querySelector('.cookies__boton--no');

        //-----------------------------------------------------
        // Funciones
        //-----------------------------------------------------

        /**
         * Método que oculta la sección de Cookie para siempre
         */
        function ocultarCookie() {
            // Borra la sección de cookies en el HTML
            seccionCookie.remove();
        }

        /**
         * Método que marca las cookies como aceptadas
         */
        function aceptarCookies() {
            // Oculta el HTML de cookies
            ocultarCookie();
            // Guarda que ha aceptado
            localStorage.setItem('cookie', true);
            // Tu codigo a ejecutar si aceptan las cookies
            ejecutarSiAcepta();
        }

        /**
         * Método que marca las cookies como denegadas
         */
        function denegarCookies() {
            // Oculta el HTML de cookies
            ocultarCookie();
            // Guarda que ha aceptado
            localStorage.setItem('cookie', false);
        }

        /**
         * Método que ejecuta tu código si aceptan las cookies
         */
        function ejecutarSiAcepta() {
            /////////////////// Tu código ////////////////
            ////////////  ¿Google Analítics? /////////////
        }

        /**
         * Método que inicia la lógica
         */
        function iniciar() {
            // Comprueba si en el pasado el usuario ha marcado una opción
            if (localStorage.getItem('cookie') !== null) {
                if(localStorage.getItem('cookie') === 'true') {
                    // Aceptó
                    aceptarCookies();
                } else {
                    // No aceptó
                    denegarCookies();
                }
            }
        }

        //-----------------------------------------------------
        // Eventos
        //-----------------------------------------------------
        cookieSi.addEventListener('click',aceptarCookies, false);
        cookieNo.addEventListener('click',denegarCookies, false);

        return {
            iniciar: iniciar
        }
    }

    // Activa el código. Comenta si quieres desactivarlo.
    cookies().iniciar();
});

Completo

Todo unido quedaría de la siguiente forma.

<section class="cookies">
    <h2 class="cookies__titulo">¿Quieres nuestras Cookies?</h2> 
    <p class="cookies__texto">Usamos cookies para mejorar tu experiencia en la web.</p>
    <div class="cookies__botones">
        <button class="cookies__boton cookies__boton--no">No</button>
        <button class="cookies__boton cookies__boton--si">Si</button>
    </div>
</section>  

<script>
    document.addEventListener('DOMContentLoaded', () => {

        let cookies = () => {
            //======================================================================
            // COOKIES
            //======================================================================

            //-----------------------------------------------------
            // Variables
            //-----------------------------------------------------
            let seccionCookie = document.querySelector('section.cookies');
            let cookieSi = document.querySelector('.cookies__boton--si');
            let cookieNo = document.querySelector('.cookies__boton--no');

            //-----------------------------------------------------
            // Funciones
            //-----------------------------------------------------

            /**
             * Método que oculta la sección de Cookie para siempre
             */
            function ocultarCookie() {
                // Borra la sección de cookies en el HTML
                seccionCookie.remove();
            }

            /**
             * Método que marca las cookies como aceptadas
             */
            function aceptarCookies() {
                // Oculta el HTML de cookies
                ocultarCookie();
                // Guarda que ha aceptado
                localStorage.setItem('cookie', true);
                // Tu codigo a ejecutar si aceptan las cookies
                ejecutarSiAcepta();
            }

            /**
             * Método que marca las cookies como denegadas
             */
            function denegarCookies() {
                // Oculta el HTML de cookies
                ocultarCookie();
                // Guarda que ha aceptado
                localStorage.setItem('cookie', false);
            }

            /**
             * Método que ejecuta tu código si aceptan las cookies
             */
            function ejecutarSiAcepta() {
                /////////////////// Tu código ////////////////
                ////////////  ¿Google Analítics? /////////////
            }

            /**
             * Método que inicia la lógica
             */
            function iniciar() {
                // Comprueba si en el pasado el usuario ha marcado una opción
                if (localStorage.getItem('cookie') !== null) {
                    if(localStorage.getItem('cookie') === 'true') {
                        // Aceptó
                        aceptarCookies();
                    } else {
                        // No aceptó
                        denegarCookies();
                    }
                }
            }

            //-----------------------------------------------------
            // Eventos
            //-----------------------------------------------------
            cookieSi.addEventListener('click',aceptarCookies, false);
            cookieNo.addEventListener('click',denegarCookies, false);

            return {
                iniciar: iniciar
            }
        }

        // Activa el código. Comenta si quieres desactivarlo.
        cookies().iniciar();

    });
</script>
Versión escritorio