Geovani Assis

O que são cookies?

Cookies são pequenos pedaços de dados em arquivos de texto, que são armazenados no seu computador ou em outro dispositivo quando os sites são carregados em um navegador. Eles são amplamente usados ​​para ‘lembrar’ de você e suas preferências, seja para uma única visita (por meio de um ‘cookie de sessão’) ou para várias visitas repetidas (usando um ‘cookie persistente’). Eles garantem uma experiência uniforme e eficiente para os visitantes e desempenham funções essenciais, como permitir que os usuários se registrem e permaneçam conectados. Os cookies podem ser definidos pelo site que você está visitando (conhecido como ‘cookies primários’) ou por terceiros, como aqueles que veiculam conteúdo ou fornecem serviços de publicidade ou análise no site (‘cookies de terceiros’).

Hoje, vamos criar um Pop-up que fica fixo na pagina, informando sobre a utilização dos cookies. Para criarmos este comunicado, vamos utilizar o seguinte código:

	<!-- HTML -->
	<section id="cookie_footer">
	    <div class="container">
	        <div align="center" class="row">
	            <div class="col-lg-12">
	                <p class="font-roboto">
	                    O site da """"""NOME DO SITE"""""" utiliza cookies. De acordo com a LGPD, só coletamos os cookies necessários para o funcionamento do site, os demais cookies estão desabilitados por padrão. Clique no botão “Aceitar” para continuar navegando. Para mais informações, consulte a nossa <a href="#">Política de Privacidade</a> e <a href="#">Política de Cookies</a>. 
	                </p>
	                
	                <div class="check_cookie" style="text-align: right;">
	                    <div class="btn_cookie" onclick="clickCookies()">Aceitar</div>
	                </div>
	            </div>
	        </div>
	    </div>
	</section>


	<!-- CSS -->
	<style type="text/css">	
	    #cookie_footer{
			position: fixed;
			width: 100%;
			bottom: 0;
			background-color: #fff;
			padding: 15px;
			z-index: 9999;
			color: white;
			box-shadow: 0 0 20px 20px #0000004a;
			display: none;
	    }
	    #cookie_footer p{
			color: #7f7d82;
			text-align: justify;
			font-size: 16px;
			margin-bottom: 15px;
	    }
	    #cookie_footer p a{ color: #05a1df; }
	    #cookie_footer .btn_cookie{
			background-color: #05a1df;
			border-radius: 50px;
			color: #fff;
			border: solid #05a1df 2px;
			width: min-content;
			padding: 10px 26px;
			cursor: pointer;
			height: 45px;
			margin: 15px 0;
			transition: ease .8s all;
	    }
	    #cookie_footer .btn_cookie:hover{
			background-color: #ffffff;
			color: #05a1df;
	    }
	    @media (min-width: 700px){
			#cookie_footer p{ margin: 0 40px 0 0; }
			#cookie_footer .col-lg-12{ display: flex; }
	    }
	</style>

	<!-- JS -->
	<script type="text/javascript">
	    var tempo = 0;
	    var d     = new Date();
	    
	    dia_hoje    = d.getDate();
	    mes_hoje    = d.getMonth() + 1;
	    dia_clicou  = localStorage.getItem('dia_aceitou_cookie');
	    mes_clicou  = localStorage.getItem('mes_aceitou_cookie');
	    
	    tempo       = dia_hoje - dia_clicou;
	    
	    if( tempo > 30 ){
	        if( mes_clicou != mes_hoje ){
	            document.getElementById("cookie_footer").style.display = "block";               
	        }       
	    }
	    if( dia_clicou == null){
	        document.getElementById("cookie_footer").style.display = "block";   
	    }
	    
	    function clickCookies() {
	      $("#cookie_footer").slideUp();
	      var d = new Date();
	      localStorage.setItem('dia_aceitou_cookie', d.getDate() );
	      localStorage.setItem('mes_aceitou_cookie', d.getMonth() + 1 );
	    };
	</script>

Com este código, temos o HTML, CSS e JS, caso queira podemos separar cada item em seus respectivos arquivos.