Implementare l'informativa sui cookies

#JavaScript  

In questi ultimi giorni non si è parlato d'altro (almeno nel settore web), la cookie law ha sorpreso un po' tutti soprattutto per quanto riguarda la poca chiarezza fatta per come implementarla e quali strumenti utilizzare.
Adesso sembra che si siano allineati un po' tutti e che la tendenza sia quella di informare in breve che il sito visitato utilizza cookie e rimandare ad un'informativa più completa indicando come eventualmente disabilitare i cookie dal proprio browser.

Questo articolo non prevede un'ennesima spiegazione della legge, come interpretarla ecc ecc, ma semplicemente un file contente poche righe di codice da inserire nel body del proprio sito per avere a portata di mano informativa breve ed estesa in modo molto facile e veloce.

Chiaramente i testi sta a voi inserirli in quanto per i vari siti potrebbero essere diversificati, quello che metto oggi a disposizione è semplicemente il codice HTML, CSS e JavaScript per avere tecnicamente il risultato descritto.

È sufficiente implementare il seguente codice all'inizio o alla fine del body:

<div id="coockie_policy" style="padding: 0 10px 0 10px;background-color:#000;position:fixed;top:0;width:100%;color:#fff;box-sizing:border-box;">
  <div id="short_info">
    <p>
      Questo sito utilizza cookie, anche di terze parti, per inviarti pubblicit&agrave; e 
      servizi in linea con le tue preferenze. Se vuoi saperne di pi&ugrave; o 
      negare il consenso <a href="javascript:void(0);" onclick="openPolicy();">clicca qui</a>. 
    </p>
  </div>
  <div id="long_info" style="display:none;">
    <h1>Informatica sui cookie</h1>
    <p>
      <!-- Qui il vostro testo della cookie policy -->
    </p>
  </div>
  <div style="text-align:right;"><a href="javascript:void(0);" onclick="closePolicy();">OK</a></div>
</div>

<script>
  if(!localStorage.view_policy){
    localStorage.view_policy = 0;
  }else if(localStorage.view_policy == 1){
    document.getElementById('coockie_policy').setAttribute('style','display:none;');
  }
  function openPolicy(){
    localStorage.view_policy = 1;
    document.getElementById('short_info').setAttribute('style','display:none;');
    document.getElementById('long_info').removeAttribute('style');
  }
  function closePolicy(){
    localStorage.view_policy = 1;
    document.getElementById('coockie_policy').setAttribute('style','display:none;');
  }
</script>

Lo stile è scritto in linea così potete usarlo con un semplice copia e incolla del codice, ovviamente se poi volete stilizzarlo a vostro piacimento fate pure.

Il funzionamento è semplice, quando ci si collega per la prima volta sul sito viene memorizzato il parametro view_policy al valore 0 nella local storage, questo valore una volta cliccato il link per saperne di più oppure il link OK viene impostato ad 1 e l'informativa non sarà più visibile alle prossime visite.

Qualora vogliate fare delle prove ricordate di svuotare la local storage di volta in volta altrimenti il div contenente l'informativa non sarà più visibile dopo la prima volta.