Dziudek's jogger

W tej części kursu zajmiemy się ... ciasteczkami ;) Jak pewnie wiecie, ciasteczka to jedna z możliwości przechowywania danych użytkownika - przydają się przykładowo do przechowywania konfiguracji strony. Ponadto można je wykorzystać nie tylko w JavaScript, ale także na przykład w PHP - w ten sposób tworząc sobie pomost do przekazywania informacji pomiędzy językami server-side i client-side.

W pliku, który dziś omawiamy znajduje się klasa Cookie posiadająca 3 metody - set, get i remove. Pierwsza z nich odpowiada za stworzenie i zapis danych w ciasteczku. Druga służy do pobierania danych z danego ciasteczka, a trzecia usuwa ciasteczka.

set

Metoda set jest najbardziej rozbudowana ze wszystkich wymienionych metod - wymaga podania nazwy, wartości i opcji ciasteczka. Jej składnia wygląda następująco:

Cookie.set('nazwa', 'wartosc', {opcje});

Pierwsze dwie zmienne i ich przeznaczenie jest chyba jasne, jeśli chodzi o opcje to mamy do dyspozycji 4 właściwości:

• domain - to domena do jakiej należy tworzone ciasteczko,
• path - ścieżka do jakiej należy ciasteczko - jeżeli chcemy by działało ono na wszystkich podstronach zapisujemy wartość tej opcji jako "/",
• duration - czas ważności ciasteczka - podajemy go jak liczbę dni,
• secure - wartość logiczna, która decyduje o tym czy ciasteczko ma być widoczne tylko podczas połączeń szyfrowanych (https).

To stwórzmy ciasteczko, które będzie przechowywało nick użytkownika i będzie dostępne w obrębie całej domeny przez 20 dni:

Cookie.set('nick','Dziudek'{path: "/",duration: 20});

Prawda, że proste w użytkowaniu ? Główny przykład pokażę później, a teraz przejdźmy do metody get...

get

Metoda get służy do pobierania wartości ciasteczek według podanej nazwy. Jej jedynym argumentem jest nazwa ciasteczka, jakie chcemy odczytać.

Składnia jest oczywiście banalna:

Cookie.get('nazwa');

Tak więc gdybyśmy chcieli pobrać wartość wspomnianego wcześniej ciasteczka, zapiszemy:

Cookie.get('nick');

Powyższy kod zwróci wartość 'Dziudek'.

Jak widzicie obsługa możliwości klasy Cookie jest bardzo łatwa, a ostatnia metoda - remove ma składnię prawie identyczną co metoda get.

remove

Ostatnia metoda klasy Cookie - remove służy oczywiście usuwaniu ciasteczek - robimy to pod względem składniowym podobnie jak w metodzie get:

Cookie.remove(cookie);

Różnica polega na tym, że zamiast nazwy musimy podać uchwyt co danego ciasteczka.

Zatem gdybyśmy chcieli usunąć wspomniane już dwa razy ciasteczko "nick" to zapiszemy:

var value = Cookie.get('nick');
var cookie = Cookie.set('nick',value);
Cookie.remove(cookie);

I tym sposobem mamy za sobą omówienie obsługi pliku Cookie.js - pora na przykład bardziej życiowy. Pamiętacie zapewne jeden z przykładów, który pojawił się przy pliku Assets.js, a służył do dynamicznej zmiany stylu strony ? Wszystko fajnie, ale co to za funkcjonalność, która nie pozwala zapamiętać ulubionego stylu użytkownika ? Teraz sobie już z tym poradzimy :)

Przyda się odrobina kodu PHP - zmiana stylu podczas ładowania strony wydaje mi się bezsensowna, a z pomocą PHP styl zmienimy już na etapie generowania kodu strony.

Przyjmijmy, że styl strony będzie przechowywany w ciasteczku o nazwie style, a jego wartością będzie liczba od 1 do 3. Ponieważ notacja nazw styli wygląda tak - style-x.css gdzie x to liczba od 1 do 3 pozwolę sobie w miejsce kodu:

wstawić kod:

A gdzieś przed tym jeszcze kod:

<?php
   (isset($_COOKIE['style'])) ? $styl = $_COOKIE['style'] : $styl = 1;
?>

Który sprawi, że domyślnie załadowany zostanie ostatnio wybrany styl.

To teraz od strony server-side - do zdarzeń onclick przycisków wyboru styli musimy dodać zapis w cookie:

if(Cookie.get('style') !== 1){
   Cookie.set('style',1,{duration: 365,path: "/"});
}

Oczywiście w kolejnych przyciskach zmieniamy 1 na 2 lub 3.

Pokazany powyżej kod sprawdzi czy aktualna wartość ciasteczka nie jest taka jak właśnie wybierana i jeżeli jest różnica (lub ciasteczka nie ma) to zostanie ustawiona nowa wybrana przez użytkownika wartość.

To jeszcze wypadałoby dodać przycisk, który będzie usuwał ciasteczko ze stylem:

$('btn4').addEvent('click',function(){
   var value = Cookie.get('style');
   var cookie = Cookie.set('style',value,{duration: 365,path: "/"});
   Cookie.remove(cookie);
});

I działający przykład:

PRZYKŁAD

W następnej części kursu zajmiemy się formatem JSON, a dokładniej plikiem json.js