Como programar la ley de cookies con Javascript

Como programar la ley de cookies con Javascript

Print Friendly, PDF & Email
Como programar la ley de cookies con Javascript
Valora esta entrada
La RGPD pide que las páginas webs pidan el consentimiento a los usuarios antes de instalar cualquier cookie y que informen al usuario para que se van a usar. Es lo que popularmente se refiere a la ley de cookies.

En este ejercicio vamos a programar un mensaje emergente que pedirá el consentimiento al usuario. Mediante una cookie la web recordará si un usuario ya consintió en el pasado o no.

A nivel de CSS los conocimientos indispensables básicos son:

  • Posicionamiento fijo de capas html

A nivel de Javascript trabajaremos con:

  • Asignación de eventos al cargar un formulario web.
  • Condicionales
  • Uso de cookies mediante la bibioteca de funciones de cookies adjunta con el ejercicio.

Se trata en realidad de un ejercicio simple. Típicamente se resolvería con jQuery pero nosotros lo hacemos con javascript puro a modo didáctico.

Enunciado

En este enlace vas a encontrar los archivos de este enunciado.

  • Haz que cuando se cargue la página web aparezca un banner informando a los usuarios que la página web usa cookies para ofrecer una mejor experiencia de usuario a los visitantes.
  • Cuando el usuario haga clic en aceptar la página web recordará esta acción durante 365 días.
  • Cualquier usuario que ya aceptó la cláusula en el pasado, durante el plazo de 365 días no volverá a ver la ventana emergente.

Como modelo puedes seguir la imagen adjunta en este ejercicio.

Puedes estilizar la alerta como desees. Arriba, abajo, en un lateral…

Propuesta resultado final ventana emergente ley de cookies
Propuesta resultado final ventana emergente ley de cookies

Solución del ejercicio

A nivel de CSS se elige un posicionamiento fijo para el banner.

Como peculiaridad podemos jugar con la propiedad opacity para el banner.ç

El botón de aceptar es en realidad un div al que se le asigna un hover y un evento mediante javascript.

Pasemos directamente a ver el código javascript.

¿Como queda el documento js?

window.onload=init;
function init(){
    bloqueRGPD = document.getElementById("emergenteRGPD");
    
    if(detectCookie("rgpdOK")){
        if (getCookie("rgpdOK")==1){eliminarBloqueRGPD();}
    }else{
        document.getElementById("botonRGPD").addEventListener("click",function(){
        eliminarBloqueRGPD();
        setCookie("rgpdOK",1,365);
        })        
    }
}

function eliminarBloqueRGPD(){
    bloqueRGPD.parentNode.removeChild(bloqueRGPD);
}

Hay dos funciones principales: initeliminarBloqueRGPD.

Dentro de init fijaros en el uso de una función anónima.

La idea de la resolución es que si se detecta una cookie se comprueba su valor. Si el valor es 1 directamente se elimina del DOM el bloqueRGPD.

En caso de que el valor sea cualquier otro o que no se detecte la cookie entonces sale la ventana emergente y se asigna comportamiento de botón al div.

Cuando se hace clic en el div se elimina el bloqueRGPD y se inserta una cookie de 365 días de duración.

¡Hola!

Querido lector,

La gracia de este ejercicio es tener a mano la biblioteca de funciones para trabajar la cookie.

Puedes descargar la solución entera en este enlace.

El siguiente paso sería resolver el ejercicio directamente con jquery.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

Entradas relacionadas:

Ejercicio JS – Susto emergente
- 75
Ejemplo de programación de una ventana emergente con Javascript. Incluye solución. Serie de ejercicios tutorial javascript del curso ifcd0110
Ejercicio – Diferencia entre ++x y x++ en Javascript
- 99
En esta publicación se repasa mediante ejercicios la diferencia entre escribir ++x y x++ o --x y x--. Es cuestión de pillarle el tranquillo.
Factores que afectan al tiempo de carga de una página web
- 307
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
La etiqueta noscript
- 309
El desconocimiento hace que a menudo muchos usuarios decidan desactivar la opción de que nuestra navegador acepte y/o interprete este lenguaje de script. ¿Que podemos hacer para avisar a los usuarios ...
Scope de las variables en javascript
- 324
En esta entrada vamos a hablar sobre el ámbito (scope) de las variables en javascript. Voy a suponer que ya sabes declarar y usar funciones y que  también tienes claro el concepto de variable y su sin...
Ejercicio JS – Crear un cronómetro con javascript
- 136
Completo cronómetro JS dónde se usa setInterval, addEventListener, removeEventListener y se repasan conceptos de CSS. Incluye solución.
¿Empezar por Javascript o Python? ¿Continuar con jQuery o angular? ¿Y node.js?...
- 286
¿Qué aprender primero? Gentileza de Stack Overflow algunas pistas. ¿Primero javascript o python? ¿Continuar con jquery o node.js?
Resumen de carácteres extraños en Javascript
- 244
Muchos alumnos me habéis pedido esta entrada sobre los carácteres , . : ; [] {} () en Javascript. Y es que tenéis razón. Hay pocos recursos en internet que los aglutinen y nos expliquen dónde debemo...
Ejercicio – ¿Qué hora es? Programación de un reloj muy sencillo en JS
- 145
Ejemplo de programación de un script que devuelve una hora con formato personalizado hh:mm:ss.
Como hacer una lista de la compra con Javascript
- 37
Ejercicio lista de la compra con Javascript. Incluye solución. Se practica la creación y eliminación de nodos, this, addEventListener, ...
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.