Ćwiczenie: JavaScript Cookies (3x45 minut) Cookies niewielkie porcje danych tekstowych, które mogą być przesyłane między serwerem a przeglądarką. Przeglądarka przechowuje te dane przez określony czas. Działanie cookies Gdy odwiedzamy jakąś stronę WWW, serwer może wysłać do przeglądarki tzw. nagłówek HTTP zawierający cookies. Przeglądarka zapamiętuje je i przechowuje przez określony czas, który jest czasem ważności tego cookies określanym przez serwer. Gdy przeglądarka zapamięta cookies przypisane danej stronie WWW, odsyła je przy każdym następnym połączeniu z daną stroną. Używając cookies możemy np. zapamiętywać ustawienia strony specyficzne dla danego użytkownika, dokonywać uwierzytelnienia czy realizować tzw. koszyk na zakupy. Budowa cookie Pojedyncze cookie to ciąg znaków określający nazwę i przypisaną jej wartość oraz dodatkowe parametry. Schematyczna postać: nazwa=wartość;max-age=czas;path=ścieżka;domain=domena;secure; Znaczenie części: nazwa nazwa identyfikująca cookie; wartość wartość danego cookie; czas czas ważności, czas życia w [s] (po tym czasie zostanie usunięte przez przeglądarkę); ścieżka ścieżka dostępu na serwerze, do której zostanie ograniczona cookie; domena określa domenę w której cookie jest dostępne; secure obecność parametru powoduje, że cookie będzie przesyłane jedynie przez bezpieczne połączenia https. Przykład: imie=jan tak określone cookie będzie miało czas życia ograniczony do jednej sesji przeglądarki (zostanie skasowane po jej zamknięciu). max-age=7200 czas życia 2 godziny. path=/ lub nie ma tego parametru cookie będzie dostępne w każdej ścieżce. 1
Podglądanie cookies w przeglądarkach Przeglądarki umożliwiają podejrzenie zebranych cookies. FIREFOX: z menu Narzędzia wybieramy Opcje, a następnie Prywatność. Kliknięcie przycisku Wyświetl ciasteczka spowoduje wyświetlenie zebranych ciasteczek z podziałem na domeny. OPERA: menedżer ciasteczek otwieramy przez wybranie z menu Narzędzia opcji Zaawansowane, a następnie Ciasteczka. Cookies i JavaScript Na zapis i odczyt cookies pozwala właściwość cookie obiektu document. Zawiera ciąg znaków opisujący cookies przypisane danej witrynie. Aby zapisać cookie, należy użyć konstrukcji: document.cookie = nazwa=wartość;max-age=czas;path=ścieżka;domain=domena;secure; ; Jeżeli chcemy zapisać kilka cookies, robimy to za pomocą osobnych instrukcji przypisania. Odczyt cookie: Jeżeli pobierzemy zawartość właściwości cookie, tym samym odczytamy zawartość wszystkich cookies przypisanych witrynie. Odczytany ciąg będzie miał postać: nazwa1=wartosc1; nazwa2=wartosc2;...nazwan=wartosc Jest to zestaw par nazwa-wartosc oddzielonych od siebie znakami średnika i spacji. Każda para opisuje jedno cookie. Wartości pozostałych parametrów nie będą uwzględnione. Jeżeli witryna nie będzie zawierała żadnego cookie, we właściwości cookie obiektu document znajdował się będzie pusty ciąg znaków. W celu pobrania wartości konkretnych cookies należy dokonać analizy ciągu i pobrać podciąg odpowiadający danej wartości. Przykład 1. Zapis i odczyt cookies Gdy na stronie nie ma cookies, skrypt zapisze 2, zawierające losowe liczby, o czasie życia równym 10 sekund w przeciwnym wypadku odczyta wartości zapisane i wyświetli je na stronie. 2
Plik index.html: Plik skrypt.js: 3
Omówienie kodu: Najpierw badamy, czy na stronie są cookies. Robimy to przez porównanie wartości właściwości cookie z pustym ciągiem znaków. Jeśli równość występuje, wykonywane są instrukcje zapisujące cookies w przeglądarce. Za pomocą metody random obiektu Math generowane są dwie losowe wartości, które zapisywane są w dwóch pomocniczych zmiennych (liczba1 i liczba2). Następnie generowany jest ciąg opisujący pierwsze i drugie cookie. Na zakończenie przygotowany jest komunikat informujący o tym, że nie znaleziono cookies, a zatem zostały wygenerowane dwie losowe wartości. Bardziej złożone czynności trzeba wykonać, gdy cookies są obecne i konieczne jest odczytanie ich wartości. Najpierw ciąg opisujący cookies jest przypisywany pomocniczej zmiennej cookiestr i deklarowane są zmienne start i end. Będą one wyznaczały część ciągu (indeksy początkowego i końcowego znaku), który zawiera poszukiwaną wartość. Najpierw chcemy odczytać wartość przypisaną cookie o nazwie liczba1. Sprawdzamy, czy w ciągu cookiestr znajduje się ciąg liczba1=, jeśli tak jest, zapisujemy w zmiennej start indeks tego wystąpienia. Metoda indexof obiektu cookiestr sprawdza, czy w ciągu reprezentowanym przez cookiestr znajduje się ciąg liczba1=. Jeżeli jest różna od 1 ciąg liczba= został znaleziony, są więc wykonywane instrukcje bloku if. Jeśli jest równa 1 ciąg nie został znaleziony czyli nie ma cookie o nazwie liczba1. W takiej sytuacji wykonywany jest blok else, który do zmiennej str dopisuje komunikat o problemie z odczytem pierwszej wartości. W bloku if wyodrębniamy wartość przypisaną cookie liczba1, czyli to, co zaczyna się za ciągiem liczba1= i kończy znakiem średnika lub znakiem końca wiersza. Sprawdzamy czy począwszy od indeksu określonego przez start+8 (ciąg liczba1= ma osiem znaków) występuje znak średnika, jeśli nie występuje wartość przypisana cookie liczba1 kończy się wraz z końcem ciągu cookiestr. Wtedy zmiennej end przypisywana jest długość ciągu cookiestr. Jeżeli znak średnika występuje, nie ma potrzeby wykonywania innych przypisań, gdyż oznacza to koniec ciągu będącego wartością cookie liczba1. Zmienna start zawiera indeks znaku od którego rozpoczyna się wartość ciągu liczba1=, a zmienna end indeks znaku, w którym kończy się poszukiwana przez nas wartość. Używamy metody substring i wartość cookie o nazwie liczba1 jest przypisana do zmiennej pomocniczej wartość. Do pobrania wartości cookie o nazwie liczba2 stosujemy analogiczną metodę. 4
Przy pierwszym wczytaniu skryptu ukaże się widok: Ponieważ nie było żadnych cookies. Jeśli w ciągu 10 sekund ponownie odwiedzimy stronę zobaczymy widok: Przykład 2. Zliczanie liczby odwiedzin w zadanym okresie 30 dni. Plik skrypt.js: 5
Opis funkcji getcookies: Przetwarzanie cookies w ten sposób polega na zebraniu ich w jednym obiekcie w taki sposób, by właściwości tego obiektu odpowiadały nazwom cookies, a wartości właściwości wartościom cookies. Jeżeli document.cookie będzie zawierało ciąg: liczba1=123; liczba2=9876 to obiekt będzie miał dwie właściwości: pierwszą o nazwie liczba1 i wartości 123 oraz drugą o nazwie liczba2 i wartości 9876. Podział na pojedyncze cookie jest dokonywany za pomocą metody split, w ten sposób otrzymujemy tablicę tab zawierającą ciągi o postaci: nazwa=wartość odpowiadające pojedynczym cookies. Następnie tworzony jest obiekt obj, w którym zapisane zostaną nazwy i wartości cookies. Zawartość tablicy tab odczytywana jest w pętli for. Ciąg o powyższej strukturze rozbijany jest na części za pomocą metody split. 6
W wyniku uzyskiwana jest tablica arr, która w pierwszej komórce zawiera nazwę cookie, a w drugiej wartość cookie. Za pomocą instrukcji if badamy czy na pewno tablica arr zawiera dwie komórki. Jeśli nie oznacza to błąd i wykonywana jest instrukcja continue rozpoczynająca kolejny przebieg pętli. Jeśli tak, wykonywana jest instrukcja tworząca nową właściwość obiektu obj. Po zakończeniu pętli obiekt obj jest zwracany jako wynik działania funkcji. Opis skryptu: liczbaodw cookie które będzie przechowywało liczbę wizyt czaszycia okres, w którym mają być zliczane wizyty Wartość zmiennej liczbaodw, która odzwierciedla dotychczasową liczbę odwiedzin pobierana jest przez wywołanie funkcji getcookie, co odbywa się w instrukcji warunkowej (po wykonaniu tej instrukcji zmienna liczbaodw będzie zawierała wartość zapisaną w cookie o takiej samej nazwie o ile takie cookie było obecne w przeglądarce lub też wartość false). Najpierw rozpatrywany jest przypadek drugi (blok if). Zakładamy, że są to pierwsze odwiedziny należy więc zapisać cookie w przeglądarce. Przypadek drugi wymaga użycia większej liczby instrukcji (blok else). Odczytywane dane są ciągiem znaków należy je przekształcić na wartość liczbową. Gdy stwierdzimy, że wartość odczytana z cookie jest błędna, zachowanie skryptu będzie podobne jak w przypadku pierwszych odwiedzin. Następnie tworzone jest cookie, w którym wartość jest zwiększana o jeden i to cookie zapisywane jest w przeglądarce. Każde kolejne odwiedziny będą powodowały zwiększanie wartości zapisanej w cookie o 1. Zadania 1. Przeczytaj uważnie zawartość instrukcji do przykładu 1. 2. Utwórz plik index.html i skrypt.js zgodnie ze wzorem podanym w przykładzie 1. 3. Przeanalizuj działanie skryptu z przykładu 1 czytając uważnie opis jego działania. 4. Powtórz punkty 2 i 3 dla przykładu 2. 5. Napisz skrypt, który umożliwi użytkownikowi wybór ulubionego koloru tła strony i zapamiętaj ten wybór w cookie. Przy każdych kolejnych odwiedzinach tego użytkownika automatycznie zmieniaj kolor strony na wybrany przez niego. 7