Cześć!

(naciśnij spację, żeby kontynuować)

Ciasteczka - z czym to się je?

Autorem zdjęcia jest MICHELE - Grafika na licencji Creative Commons CC BY-SA 2.0

Co w ciastku siedzi?

Autorem zdjęcia jest Robert Couse-Baker - Grafika na licencji Creative Commons CC BY 2.0

Ciastko (profesjonalnie nazywa się "HTTP Cookie") to po prostu fragment danych, które są zapisywane przez stronę internetową w przeglądarce i które mogą być odczytane przez serwer, który tę stronę wygenerował

Po co ktoś miałby zapisywać dane w mojej przeglądarce? Nie stać ich na twarde dyski?

  • statystyki odwiedzin (nie liczymy tego samego użytkownika wiele razy, albo sprawdzamy czy użytkownicy do nas wracają)
  • zakupy internetowe bez zakładania konta
  • automatyczny login
  • przechowywanie informacji w formularzu, żeby nie zniknęły po odświeżeniu strony
  • wyświetlanie informacji o ciasteczkach

Ciasteczka to nie jedyny sposób na zapisywanie danych w przeglądarce

Jest jednak prawdopodobnie najbardziej rozpowszechniony

Obejrzyjmy nasze ciastka

Przypomnienie: narzędzia programisty w Chrome włączamy przez F12 (Ctrl + Option + I na Macbookach)

Anatomia ciastka

Każde ciastko składa się przynajmniej z nazwy i wartości.

Nazwa i wartość to po prostu napisy

Dodatkowo przeglądarka zapamiętuje, do której domeny należy dane ciastko, żeby wiedzieć któremu serwerowi może je udostępnić

Serwer widzi tylko nazwę i wartość ciastka

Pozostałe atrybuty są widoczne tylko dla przeglądarki i służą zarządzaniu ciastkami

Spośród tych atrybutów najbardziej nas zazwyczaj interesuje tym razem nie liczba kalorii, ale data ważności

Dlaczego informuje się użytkowników o tym, że strona używa ciastek?

Jednym z zastosowań ciastek jest śledzenie naszych poczynań w sieci

UE uznała, że jeżeli będzie wymagana zgoda użytkownika na zapisanie ciastka, to problem będzie rozwiązany

Dyrektywa 2009/136/EC Rady Europy nakłada na dostawców treści internetowych, którzy chcą zapisywać dane w przeglądarce (nie tylko przez cookie, ale też przez inne mechanizmy, jak localStorage) obowiązek uzyskania zgody na taką czynność

I co z tego wynikło?

W praktyce nic się nie zmieniło. Czy ktoś, kiedyś nie zgodził się na zapisanie ciastka?

Ale za to musimy wiedzieć, jak zrobić informację o cookies

Do maszyn!

Zdjęcie w domenie publicznej. Autorem jest Tech. Sgt. Keith Brown

Źródła

Stąd pobierzesz paczkę z kodem źródłowym

Po wypakowaniu znajdziesz w głównym folderze dwa pliki HTML - demo.html będzie nam służyć jako przykład, index.html to plik na którym pracujemy.

Rozpakujmy nasze źródła i otwórzmy w przeglądarce plik index.html.

Nic nie widać?

Czas włączyć narzędzia programisty!

Tym razem mamy naprawdę prostą strukturę dokumentu:

Element aside w którym znajduje się informacja o ciasteczku oraz przycisk do jej zamknięcia

Mnóstwo miejsca, które można wypełnić treścią

Zastanówmy się co można zrobić, żeby widoczna w kodzie informacja o ciasteczkach, wyświetliła się na stronie:

Jakie klasy ma ustawiony element zawierający informację?

Co się stanie, kiedy zabierzemy klasę hide?

Po tym eksperymencie (i po naszych poprzednich warsztatach) rozwiązanie powinno już się samo nasuwać

Jak napisać funkcję, która pokaże informację o ciasteczkach?

Pokaże, czyli zabierze klasę hide

Szybka powtórka, bo widzieliśmy się przecież tak dawno

document

querySelector()

classList

classList.add() classList.remove()

Piszemy!

Zdjęcie w domenie publicznej. Autorem jest Lawrence Monk

Nasza funkcja wygląda zapewne mniej więcej tak


function showNotice() {
  document.querySelector('#cookie-notice').classList.remove('hide');
}
          

Mamy już funkcję, ale po przeładowaniu nadal nie widać naszej informacji. Dlaczego?

Funkcję trzeba jeszcze wywołać

W naszym przypadku najlepiej będzie to zrobić umieszczając taki fragment tuż przed tagiem zamykającym body


  ...        
  <script>
    showNotice();
  </script>
</body>
          

Nasze dzisiejsze ćwiczenie jest na tyle krótkie, że wszystko (czyli HTML, CSS i JavaScript) będziemy trzymać w jednym pliku

Pamiętajmy jednak, że w prawdziwym projekcie, warto mieć osobne pliki zarówno na CSS jak i JavaScript

Pierwsze koty za płoty

Udało nam się wyświetlić informację o ciastkach, to teraz zastanówmy się jak ją schować

Stworzenie funkcji, której działanie będzie odwrotne do funkcji showNotice() to już dla nas bułka z masłem

Zdjęcie w domenie publicznej. Autorem jest Marina Shemesh

200kcal później...


function hideNotice() {
  document.querySelector('#cookie-notice').classList.add('hide');
}
          

Kto pamięta co zrobić, żeby kliknięcie w przycisk uruchomiło naszą funkcję? Ręka do góry!

document.querySelector( '#cookie-notice-button' ).addEventListener( 'click', hideNotice );

Umieszczamy to pod wywołaniem naszej funkcji showNotice() i ...

Udało się!

Ale czy na pewno?

Co się stanie gdy odświeżymy stronę?

W większości przypadków chciałybyśmy, żeby użytkownikowi, który już raz potwierdził że zobaczył informację o ciastkach, drugi raz już jej nie pokazywać

Musimy gdzieś zapisać, że użytkownik kliknął w przycisk

Ale gdzie?

W zmiennej?

Ale zmienne są czyszczone przy każdym odświeżeniu strony...

Gdyby tak można było zapisać dane w przeglądarce tak, żeby przetrwały odświeżanie...

Autorem zdjęcia jest mackenzie - Grafika na licencji Creative Commons CC BY-ND 2.0

Ciastka są jak najbardziej odpowiednim mechanizmem na przechowanie takiej informacji

Dzisiaj jednak użyjemy innego, a to dlatego, że ciastka do działania wymagają, aby strona została zaserwowana z serwera www, a nie wczytana z dysku. Nie mamy dzisiaj niestety czasu, żeby wykonać takie ćwiczenie

Ale nic nie stracimy! Wręcz przeciwnie, bo dowiemy się (i nauczymy korzystać) o jeszcze jednym mechanizmie służącym do zapisywania danych w przeglądarce!

Local Storage!

Wprowadzony w ramach standardu HTML5, a więc stosunkowo młoda technologia (IE8+)

Widoczny tylko dla przeglądarki (ciastka są widoczne także dla serwera)

Można w nim przechować więcej danych, ok. 1000 razy więcej niż w ciastkach

Duuuużo łatwiejszy w użyciu

Podstawowe użycie local storage

Zapisywanie napisu

localStorage.setItem('nazwa', 'wartość');

Odczyt z local storage i zapisanie do zmiennej

var zmienna = localStorage.getItem('nazwa');

Skasowanie danych z local storage

localStorage.removeItem('nazwa');

Zastanówmy się teraz i zapiszmy w krokach po polsku, jak mogłybyśmy wykorzystać ten mechanizm, żeby nasza informacja o ciasteczkach, zachowywała się tak, jak powinna

Gotowe?

Wyszło nam pewnie coś takiego:

1. Przy otwarciu strony sprawdź, 
   czy w local storage jest informacja, że użytkowik kliknął przycisk
2. Jeśli nie ma - wyświetl informację o ciasteczkach
3. Gdy użytkownik kliknie przycisk, 
   zapisz informację o tym w local storage i ukryj informację o ciasteczkach

Spróbujmy to teraz zakodować

Zacznijmy przewrotnie od końca. Jak zmodyfikujemy naszą funkcję hideNotice()?

function hideNotice() {
  document.querySelector('#cookie-notice').classList.add('hide');
  localStorage.setItem('showCookieNotice', 'false');
}
          

W local storage zapisaliśmy pod nazwą showCookieNotice słowo false. To będzie dla nas znak, żeby więcej nie wyświetlać informacji o ciastkach

Teraz zastanówmy się nad funkcją showNotice()

function showNotice() {
  if(localStorage.getItem('showCookieNotice') !== 'false') {
    document.querySelector('#cookie-notice').classList.remove('hide');
  }
}
          

Korzystając z if sprawdzamy, czy to, co zapisano w local storage pod nazwą showCookieNotice nie jest słowem false i tylko wtedy wyświetlamy naszą informację.

Czas próby!

Zapisujemy naszą stronę, odświeżamy i patrzymy co się dzieje

Wszystko gra?

Żeby przeprowadzić próbę więcej niż raz, musimy usunąć z local storage to, co zapisane jest pod nazwą showCookieNotice. Możemy to zrobić wpisując w konsoli:

localStorage.removeItem('showCookieNotice');

Dzięki za wspólnie spędzony czas i do zobaczenia!