Cookies y Local Storage sin plugin – jQuery
Esta es una forma sencilla y ligera de implementar el aviso de cookies en cualquier web, incluso en un wordpress para evitar el uso de plugin.
Primero el html con el aviso de cookies
con el aviso en sí, el texto que leerá el usuario que entre en la web:
<aside id="avisoCookies">
Esta página utiliza cookies propias y de terceros con el fin de mejorar el servicio. Si continuas navegando, aceptas su uso. Puedes informarte sobre cómo cambiar la configuración de tu navegador u obtener más información sobre la ley de cookies <a href="http://politicadecookies.com/" rel="nofollow">siguiendo este enlace</a>.
<button id="aceptarCookies">Aceptar</button>
</aside>
El texto se puede modificar y personalizar por uno propio, así como la ruta a donde llevará el enlace de información ( http://politicadecookies.com ) se puede cambiar por la propia página de política de cookies. Lo único importante sería respetar las id=»avisoCookies» e id=»aceptarCookies» o en caso de cambiarlas por ids personalizadas tenerlas en cuenta después para el código jQuery y el css.
Despues un poco de jQuery
que se encarga de hacer visible o invisible el aviso y de hacer que el navegador recuerde la aceptación del usuario.
function checkCookieLaw()
{
if ( window.localStorage.getItem('cookieLawKeyMiWeb') )
{
$('#avisoCookies').hide();
}
}
checkCookieLaw();
$('#aceptarCookies').on( "click", function(){
window.localStorage.setItem('cookieLawKeyMiWeb', true);
$('#avisoCookies').hide();
});
Este código comprueba si existe el registro cookieLawKeyMiWeb, nombre de variable que se puede personalizar también, y en caso de existir porque el usuario ya lo aceptó anteriormente esconde el aviso de cookies. Si no existe el registro hay un disparador a la espera de que el usuario pulse el botón con la id=»aceptarCookies» para crearlo y esconder el aviso de cookies.
Por último el css
para dar el estilo que queramos a la caja donde se va a mostrar el aviso de cookies:
#aviso-cookies {
position: absolute;
top: 0;
z-index: 999;
width: 100%;
padding: 15px;
box-sizing: border-box;
background: rgba( 220, 220, 220, 0.8);
}
Este es un ejemplo sencillo, pero se puede personalizar totalmente a gusto de cada cual. En este caso he hecho que aparezca arriba de la página por encima de todos los demás elementos y con un sencillo fondo gris.