Dziudek's jogger

Przed nami ostatnia przygoda z konsolą JavaScript w tym kursie ;) Zajmiemy się pluginem hash.cookie.js . Jego zadaniem jest zapis i odczyt danych typu obiektowego z ciasteczek. Pewnie niektórzy pamiętają jak przy okazji omawiania sekcji Remote robiliśmy podobne rzeczy z formatem JSON. Omawiany plugin tworzy nam wygodny interfejs do tego typu operacji bo stanowi połączenie wygody operowania na obiektach jaką daje nam plugin hash.js oraz klas Cookie i Json. Sam plugin oferuje nam kilka dodatkowych udogodnień, które wcześniej musielibyśmy sami oprogramować - szczegóły omówię w części teoretycznej.

Oczywiście do celów badawczych posłuży nam JS - dla użytkowników Opery i IE namiastka tego co jest w Firefoksie:

Konsola JS

Klasa Hash.Cookie będąca głównym składnikiem pluginu o tej samej nazwie posiada dwie własne metody:

• save - metoda zapisująca obiekt w ciasteczku,
• load - metoda odczytujące dane z ciasteczka

Poza tym mamy do dyspozycji metody extend, set, merge, empty i remove znane z pluginu Hash.

Co do opcji to klasa Hash.Cookie ma jedną własną opcję - autoSave - jeżeli ma ona wartość true to po każdej zmianie obiektu, który mamy zamiar umieścić w ciasteczku, zostanie on automatycznie zapisany. Prawda, że wygodne ? Zamiast co chwila zapisywać "ręcznie" zmiany, skrypt robi to za nas :) Oczywiście nie polecam tego rozwiązania przy bardzo częstych modyfikacjach obiektu, ale w wypadku obiektów przechowujących konfigurację strony czy inne dane, które użytkownik zmienia względnie rzadko rozwiązanie w sam raz.

Pozostałe opcje to wszystko to co oferuje nam klasa Cookie.

Jest jeszcze jedna rzecz warta wspomnienia przed przejściem do zagadnień praktycznych - metoda save posiada bardzo przydatne zabezpieczenie. Jakie ? Otóż jak pewnie wiecie każde ciasteczko może przechowywać do 4kB danych. Metoda save w trakcie swojego działania zwraca nam wartość logiczną - jeżeli jest to true to dane zostały pomyślnie zapisane w ciasteczku, jeżeli jednak zwróci nam false oznacza to iż powstały ciąg znaków jest zbyt długi i nie został zapisany w ciasteczku.

Obiekt, który zamierzamy zapisać w ciasteczku tworzymy w następujący sposób:

var obiekt = new Hash.Cookie("nazwa_ciasteczka", {opcje});

Myślę, że zmienne w prezentowanym przykładzie mówią same za siebie :)

Stwórzmy zatem nasz pierwszy obiekt, który chcielibyśmy zapisać w ciasteczku:

var dane = new Hash.Cookie("daneDziudka", {duration: 7200, path: "/"});

Po wykonaniu tego kodu mamy już pusty obiekt dane. Pora go zapełnić jakimiś informacjami:

var dane = new Hash.Cookie("daneDziudka", {duration: 7200, path: "/"});

dane.extend({
    imie: "Tomek",
    nick: "Dziudek",
    mail: "dziudek@test.pl"
});

I oczywiście korzystamy z metody save po tym wszystkim by zapisać dane :

var dane = new Hash.Cookie("daneDziudka", {duration: 7200, path: "/"});

dane.extend({
    imie: "Tomek",
    nick: "Dziudek",
    mail: "dziudek@test.pl"
});

dane.save();

Co bardziej nadgorliwi mogą od razu zrobić sprawdzanie czy przypadkiem nie za dużo upakowali do ciasteczka :

var dane = new Hash.Cookie("daneDziudka", {duration: 7200, path: "/"});

dane.extend({
    imie: "Tomek",
    nick: "Dziudek",
    mail: "dziudek@test.pl"
});

var czyZapisano = dane.save();

alert((czyZapisano) ? "Dane zapisane !" : "Błąd zapisu: za dużo danych !");

Ponieważ jednak nie mamy ochoty co chwila wywoływać metody save, korzystamy z opcji autoSave:

var dane = new Hash.Cookie("daneDziudka", {autoSave: true,duration: 7200, path: "/"});

dane.extend({
    imie: "Tomek",
    nick: "Dziudek",
    mail: "dziudek@test.pl"
});

Oczywiście opcja autoSave ma tą wadę, że nie pozwala nam sprawdzić czy dane się poprawnie zapisały. Ale spokojnie wystarczy jedna linijka i wszystko będzie jasne:

(Json.toString(dane).length > 4096) ? false : true;

Oczywiście jak poinformujecie użytkownika o rezultacie operacji zapisu zależy już od Was ;)

Co do metody load - w sumie raczej jej nie użyjecie "ręcznie", bo jest ona wywoływana przy inicjalizacji obiektu klasy Hash.Cookie - zatem jeżeli dane ciasteczko już istnieje to nasza zmienna od razu będzie obiektem o zawartości wcześniej zapisanym w ciasteczku. Uruchamiamy w konsoli poniższy kod:

var dane = new Hash.Cookie("daneDziudka", {autoSave: true});

dane.extend({
    imie: "Tomek",
    nick: "Dziudek",
    mail: "dziudek@test.pl"
});

a następnie odświeżamy stronę i uruchamiamy kod:

var dane = new Hash.Cookie("daneDziudka", {autoSave: true});

alert(dane.get("mail"));

Powinniśmy w alercie zobaczyć "dziudek@test.pl". Oczywiście możecie w konsoli sprawdzić wszystko po kolei lub w pętli lub na jeszcze inne sposoby - wybór należy do Was :)

To wszystko o pluginie hash.cookie.js - w następnej części kursu zajmiemy się pluginem tips.js .