07 Ene Como programar la ley de cookies con Javascript
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…
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: init y eliminarBloqueRGPD.
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!
¿Te ha gustado esta publicación?
¡Valora sobre 5 estrellas esta publicación!
Todavía no hay votos. Sé el primero en valorar la entrada.
Vaya, parece que hay puntos a corregir
¿Me ayudas a mejorar?
¡Gracias por tu feedback!
Entradas relacionadas:
Veamos como podemos deshabitar el envío de un formulario web mediante javascript haciendo uso del evento submit() y preventDefault()
En las fases iniciales de aprender html, css y javascript nos vemos abrumados por tanta información. Con la entrada de hoy hacemos un resumen sobre como comentar código en los principales lenguajes de...
Explicamos como desactivar el comportamiento por defecto de un elemento HTML mediante el uso del método javacript preventDefault()
Dos ejercicios nivel principiante dónde repasar como se usa la estructura condicional if(){}else if(){}else{}. Incluyen solución.
Ejercicio que pregunta iterativamente el color del caballo blanco de santiago hasta que se resuelve. Incluye solución.
Ejercicio avanzado de javascript para controlar el acceso de usuarios a una página web mediante el uso de cookies. Incluye solución.
No hay comentarios