Creación de una Fixed Bar para RGPD con Local Storage (Javascript) y Bootstrap 4

Tutoriales

Demo Github

El Termino RGPD son las iniciales de Reglamento General de Protección de Datos, en ingles sería GDPR (General Data Protection Regulation), no quiero ahondar en esta reglamento, puedes investigar en Google sobre el. En este tutorial vamos a construir una Barra con Javascript y Bootstrap 4, dentro de esta Barra puedes colocar enlaces a tu Política de Cookies, Política de Privacidad, etc. Vamos con el tutorial.

Vamos a usar HTML para crear la barra, esta Barra va estar en la parte inferior de la ventana del navegador, cuando el usuario se desplaza verticalmente por la venta del navegador la barra se mantendrá fijo y solo desaparecerá cuando haga clic en un botón para cerrar esta barra.

Mi barra tendrá el siguiente texto: 

Para que la barra no se le vuelva aparecer a un usuario que ya hizo clic en el botón para cerrar la barra usaremos Local Storage con Javascript.

Si no estas familiarizado con Bootstrap te recomendamos leer este artículo Que es Bootstrap, Historia y tu Primer Hola Mundo.

Barra HTML – Bootstrap 4

Vamos a crear nuestra Barra HTML con el Framework Bootstrap en su versión Nro 4, que es muy útil para el Desarrollo ágil de un Proyecto, este Framework cuenta con una clase llamada fixed-bottom que de manera rápida coloca una capa o div en la parte inferior y lo mantiene fija a la vista del usuario. Asimismo le colocaré la clase personalizada rgpdbh a mi div, tu le puedes colocar el nombre de clase que desees.

Dentro de nuestro div colocamos el texto y los enlaces a nuestra Política de Cookies, Política de Privacidad, etc. y al lado un botón para que el usuario pueda cerrar esta Barra, al hacer clic en este botón el Navegador llama a la función hbRgpd() la cual crearemos con Javascript más adelante, esta función lo que hace es ocultar la Barra RGPD de la Ventana del Navegador

El botón para cerra la Barra también es creado con Bootstrap 4 y le coloco una clase personalizada llamada bcrgpdbh, tu le puedes colocar el nombre de clase que desees.

Javascript (Local Storage)

Para mantener mi vista HTML limpia voy a crear un nuevo archivo llamado app.js para colocar mi código Javascript, lo primero que haré es declarar la función hbRgpd() la cual cierra la Barra cuando el usuario hace clic en el botón cerrar.

Pero lo que debemos hacer es mostrarle la Barra solo si el usuario aún no ha cerrado la barra ni se ha guardado un valor en localStorage en el Navegador, si el usuario ya cerro esta barra, obviamente no se le debe de mostrar, lo primero que haré es almacenar el dato llamado rgpd con el valor aceptado.

Luego oculto mi barra la cual le puse de nombre de clase rgpdbh puedes ver el código los comentarios en donde explico que hace cada línea del código

Ahora lo que haré es crear una variable en donde voy a leer el dato que he almacenado en localStorage, a la variable la llamaré rgpdval y dentro de ella coloco y hago la lectura del dato rgpd para verificar si es que ha sido almacenado en localStorage, esta lectura la realizo con localstorage.getItem

Luego mediante una sentencia ifelse verifico si la variable rgpdval contiene el dato rgpd, es decir si es que el usuario ha aceptado (ha hecho clic en el botón para cerrar la Barra), entonces si es cierto pues no le mostramos la Barra, en cambio si no cerro la Barra le mostraré la Barra RGPD

Eso es todo, entonces si el usuario ve la barra RGPD por primera vez, es porque aún no tiene el dato rgpd con el valor aceptado almacenado en localStorage

Y si el usuario cierra la barra haciendo clic en el botón Cerrar, se le almacenará el dato rgpd con el valor aceptado en localStorage, por ende no se le muestra la Barra RGPD

Listo con eso ya tengo mi Barra lista para utilizarla en mi proyecto.

Notas

  • Para poder visualizar si los datos se almacenaron el en Navegador puedes usar las Dev Tools del Navegador Google Chrome, presionando F12 y luego ve a la pestaña Application y dentro de ella ve a Storage > Local Storage

 

Síguenos en las Redes Sociales para que no te pierdas nuestros próximos contenidos.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required