Nueva versión del sencillo mensaje de aceptar cookies para tu web

Un lector me ha escrito consultando sobre un post algo antiguo, sobre cómo poner un sencillo mensaje de cookies en una web. La verdad es que no me he explicado muy bien en aquel post, los navegadores han cambiado durante estos últimos años, Javascript también.. así que aquí estoy compartiendo otro mensaje de aceptar cookies más actual.

Este mensaje de aceptar cookies es una actualización de aquel antiguo que vengo usando en nuevos proyectos. Es un mensaje hecho artesanalmente que puedes copiar y pegar para tu web. El único requisito que tiene es que necesitas usar la librería de jQuery para que funcione. jQuery hoy día es como un estándar, hace tan bien su trabajo de acceder al DOM de las páginas web, que cómo no usarlo en todos los proyectos.

Una peculiaridad que tiene este mensaje es que no utiliza cookies, jeje, utiliza el localStorage de los navegadores. El localStorage es uno de los varios sistemas de almacenamiento de información en navegadores para hacer que las webs sean seguras y que funcionen. Espero que no se metan de nuevo los abogados a legislar y hacernos la vida más complicada también con el localStorage. Como si fueran un problema estas cookies, si realmente lo que hacen es aumentar la seguridad de las webs.. a saber:

Las webs que usan cookies son más seguras que las que no usan cookies.

Es un sin sentido, pero en fin, hecha la Ley, no queda más que obedecer y punto pelota. Todos a poner el bloqueante y cansino mensaje de cookies en todas las webs 🙁

Vamos con el código, el mensaje de aceptar cookies

Lo primero que todo es que necesitas cargar en el HEAD del documento la librería de jQuery. A fecha de hoy se publica este CDN que puedes copiar y pegar en tu web:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Lo siguiente es el código en sí que hace la caja del mensaje en la parte inferior de la web. El mejor sitio donde puedes ponerlo es antes de cerrar la etiqueta BODY, es decir, antes de donde pone </BODY> en tu página web. Otra opción es poner el DIV dentro del BODY,  y los códigos STYLE y SCRIPT en la cabecera. Pero lo dicho, si quieres ser papista a tope y seguir los consejos sobre SEO, el mejor sitio es antes de cerrar el BODY. Ahí va el código:

<div id="div-cookies" style="display: none;">
    Necesitamos usar cookies para que funcione todo, si permanece aquí acepta su uso, más información en
    <a hreflang="es" href="/info/aviso-legal">Aviso Legal</a>
    y la
    <a hreflang="es" href="/info/politica-de-privacidad">Política de Privacidad</a>.
    <button type="button" class="btn btn-sm btn-primary" onclick="acceptCookies()">
        Acepto el uso de cookies
    </button>
</div>
<style>
#div-cookies {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    box-shadow: 0px -5px 15px gray;
    padding: 7px;
    text-align: center;
}
</style>
<script>
function checkAcceptCookies() {
    if (localStorage.acceptCookies == 'true') {
    } else {
        $('#div-cookies').show();
    }
}
function acceptCookies() {
    localStorage.acceptCookies = 'true';
    $('#div-cookies').hide();
}
$(document).ready(function() {
    checkAcceptCookies();
});
</script>

A que es sencillo, ya tú te lo puedes adaptar como quieras. Fíjate que este mismo código no usa Cookies para saber que el usuario ya ha aceptado, sino el localStorage del navegador.

Cómo ver la información de cookies, localStorage, etc..

En Firefox o Chrome se hace dándole con el botón derecho a la página, y click en inspeccionar página web. Deberías de ver algo parecido a la image siguiente:

Esta imagen es del navegador que más uso últimanente, el Firefox Developer Edition. ¡Muy recomendable!

Reuniendo todos los códigos fuentes en un único fichero

Recapitulando lo anterior, sólo me queda dejar todos los códigos fuentes anteriores en un sólo fichero único que puedes adaptar a lo que necesites. Está 100% probado en local y funciona. Tampoco necesitas subir este fichero al servidor para que funcione ya que sólo usa HTML, CSS y Javascript.. con lo que grabando esto en un fichero index.html en tu ordenador, le haces doble click para que se abra en el navegador y lo verás:

<html>

<head>
    <title>JnjSite.com: Nueva versión del sencillo mensaje de aceptar cookies para tu web</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <meta charset="utf-8">
</head>

<body>
<div id="div-cookies" style="display: none;">
Necesitamos usar cookies para que funcione todo, si permanece aquí acepta su uso, más información en
<a hreflang="es" href="/info/aviso-legal">Aviso Legal</a>
y la
<a hreflang="es" href="/info/politica-de-privacidad">Política de Privacidad</a>.
<button type="button" class="btn btn-sm btn-primary" onclick="acceptCookies()">
Acepto el uso de cookies
</button>
</div>
<style>
#div-cookies {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    box-shadow: 0px -5px 15px gray;
    padding: 7px;
    text-align: center;
}
</style>
<script>
function checkAcceptCookies() {
    if (localStorage.acceptCookies == 'true') {} else {
        $('#div-cookies').show();
    }
}

function acceptCookies() {
    localStorage.acceptCookies = 'true';
    $('#div-cookies').hide();
}
$(document).ready(function() {
    checkAcceptCookies();
});
</script>
</body>

</html>

Espero haber podido ayudar.

Un saludo.