Wpis ten przedstawia w jaki sposób możemy stworzyć okienko z informacją o ciasteczkach (cookie) na naszej stronie www. Podany niżej kod nie używa żadnej biblioteki ani frameworka (w stylu jQuery itp).

1. Dodanie kontenera

Pierwszym krokiem będzie dodanie kontenera, w którym będzie wyświetlać się komunikat. Posłuży do tego następujący kod html:

<div id="cookies-message">
      Ta strona używa ciasteczek (cookies), dzięki którym nasz serwis może działać lepiej.
      <a onclick="WHCloseCookiesWindow();" id="accept-cookies-checkbox">Rozumiem</a>
</div>

Samą treść komunikatu możemy oczywiście zmienić. Link wywołuje funkcję w JavaScript o nazwie WHCloseCookiesWindow(), którą później dodamy do strony.

2. Ostylowanie komunikatu

Dodajmy trochę stylów do naszej strony:

<style>
/* cookie alert */
#cookies-message{ 
  color: white; 
  padding: 12px 10px; 
  text-align: center; 
  position: fixed; 
  bottom:0px; 
  left:0; 
  right:0; 
  background-color: rgba(0,0,0,0.6); 
  z-index: 100000; 
  box-shadow: 0 0 5px rgba(0,0,0,0.4); 
  display: none;
}
#accept-cookies-checkbox{ 
  background-color: #00AFBF; 
  color: white; 
  border: solid 1px #00AFBF; 
  transition: all 0.5s; 
  padding: 2px 6px; 
  border-radius: 4px; 
  display: inline-block; 
  margin-left: 10px; 
  text-decoration: none; 
  cursor: pointer;
}
#accept-cookies-checkbox:hover{ 
  background-color: transparent; 
  border-color: white;
}
</style>

Style do elementu #cookies-message zapewniają, że będzie się on wyświetlać na dole okna przeglądarki, tekst będzie biały, wyśrodkowany i na ciemnym tle, będzie do niego dodany lekki cień i domyślnie element ten będzie ukryty.

Następnie mamy style dla przycisku zamykającego okno wraz ze stylami zdarzenia najechania myszką na przycisk (hover).

3. Dodanie kodu JavaScript pokazującego komunikat

Domyślnie komunikat jest niewidoczny. Musimy dodać skrypt, który spowoduje że będzie on wyświetlany. Oczywiście musi się pojawiać tylko wtedy, kiedy użytkownik jeszcze nie był na stronie albo go nie zamknął. Posłuży do tego następująca funkcja:

<script>
function WHCheckCookies(){
  if(!localStorage.cookies_accepted) {
    document.getElementById("cookies-message").style.display = "block"
  } 
} 
window.onload = WHCheckCookies;
</script>

Funkcja WHCheckCookies(), która jest wywoływana w momencie załadowania dokumentu sprawdza czy w localStorage istnieje zmienna cookies_accepted – jeśli nie to zostaje wyświetlony komunikat o ciasteczkach.

4. Zdarzenie zamknięcia komunikatu

Przyszedł czas dodania zdarzenia dla przycisku zamykającego komunikat:

function WHCloseCookiesWindow(){ 
  localStorage.cookies_accepted = true; 
  document.getElementById("cookies-message").remove();
}

Funkcja WHCloseCookiesWindow ustawia zmienną localStorage.cookies_accepted  na wartość true oraz usuwa komunikat o ciasteczkach z naszej strony www.

Podsumowanie

Mam nadzieję, że ten krótki wpis pomoże komuś z Was w samodzielnym stworzeniu komunikatu o przechowywaniu ciasteczek na swojej stronie www.

Gotowy kod przykładu znajduje się na stronie: https://github.com/kamilwyremski/cookie-alert