» wróć na stronę główną
» wróć do AM


Cookie

Kończą Ci się pomysły na urozmaicenie swojej strony WWW? Może pomogą Ci w tym ciasteczka czyli cookies. "Ciasteczka" to niewielkie pliki tekstowe zapisywane przez przeglądarkę na dysku klienta (osoby oglądającej stronę). Pojedynczy cookie może zajmować do 4096 bajtów i każda witryna może zapisać do 20 takich plików. Dzięki cookies możemy np. zaoszczędzić czas wypełniania tego samego formularza przy wejściu na stronę (np. logowania), cookies są także stosowane w sklepach internetowych. W tym artykule opisze proces tworzenia cookie za pomocą JavaScript (nie wymaga on żadnych dodatkowych narzędzi, wystarczy notatnik i przeglądarka), aby go zrozumieć niezbędna jest znajomość podstaw JavaScript.

Tworzenie cookie

Za obsługę cookies w JavaScript odpowiedzialna jest właściwość document.cookie w obiekcie document. Tworzenie ccokie polega na przekazaniu do właściwości document.cookie odpowiedniego napisu (string). Można tworzyć dwa rodzaje cookies: cookie sesji (jest przechowywane na komputerze aż do zamknięcia okna przeglądarki w którym powstało) i trwałe cookie (ich żywotność jest określona przez twórcę). Na początek zajmę się cookie sesji. Utworzenie takiego "ciasteczka" przesłaniu do właściwości document.cookie napisu zawierającego nazwę cookie i jego treść: document.cookie="nazwa=tresc". Przy takim zapisie mogą wystąpić problemy jeżeli w treści cookie pojawią się znaki specjalne (np. = lub "), aby tego uniknąć można zakodować treść funkcją escape(tresc), która zamienia znaki specjalne na ich kody (np. = zamieni na %3D). Aby przywrócić tekst do poprzedniej formy należy użyć funkcji unescape(tresc). Czas na przykładowy skrypt:

var tresc='Treść pierwszego cookie'; //ustalamy treści cookie
tresc=escape(tresc); //kodujemy tekst (w tym przykładzie nie jest to niezbędne)
document.cookie="ciastko1="+tresc; //tworzymy cookie o nazwie ciastko1

Tworzenie trwałego cookie jest nieco trudniejsze, oprócz nazwy i treści trzeba dodać także czas przez jaki ma być przechowywane na komputerze. Datę wygaśnięcia można ustalić obliczając liczbę milisekund, oznaczającą datę wygaśnięcia (liczone od 1.1.1970).

var waznosc=new Date(); //tworzymy nowy obiekt zawierający datę
var tresc='Treść stałego cookie';
//ustawianie treści cookie
tresc=escape(tresc);
//kodowanie tekstu
waznosc.setTime(waznosc.getTime()+1000*60*60*24*7); //ustawianie daty wygaśnięcia (na 7 dni)
document.cookie="ciastko2=" + tresc + ";expires=" + waznosc.toGMTString();
//tworzy cookie, parametr expires oznacza termin wygaśnięcia

Teraz trochę wyjaśnień:
waznosc.setTime() - ustawia datę w oparciu o liczbę milisekund jak upłynęła od 1.1.1970
waznosc.getTime() - zwraca liczbę milisekund która upłynęła od 1.1.1970
1000*60*60*24*7 - liczy liczbę milisekund (milisekundy * sekundy * minuty * godziny (w dobie) * liczba dni)
waznosc.toGMTString() - konwertuje datę na odpowiedni napis

Dzięki stałym cookie możemy utworzyć "ciasteczka", "żyjące" np. 20 sek, 1 dzień, 3 miesiące itp.

Odczytywanie cookie

Wcześniej opisałem jak tworzyć cookie, teraz będzie jak je odczytać. Wszystkie dane dotyczące cookies zawarte są we właściwości document.cookie, jednak jest pewien problem, są one zapisane wszystkie razem w jednym stringu wyglądającym mniej więcej tak: nazwa1=treść pierwszego ciastka; nazwa2=treść drugiego ciastka itd. Aby otrzymać treść cookie o podanej nazwie należy stworzyć odpowiednią funkcję, która wyłuska z całego napisu treść cookie znając jego nazwę. Oto ona:

function czytaj_ciacho(nazwa)
 {
  nazwa+="="; //uzupełnia nazwę
  startCookie=document.cookie.indexOf(nazwa); //sprawdza czy
istnieje cookie o podanej nazwie
  if (startCookie==-1) {return ""} //jeżeli nie istnieje
  startCookie+=nazwa.length; //początek treści cookie
  if (document.cookie.indexOf(";",startCookie)==-1) //jeżeli jest więcej cookie
   {
    koniecCookie=document.cookie.length; //jeżeli nie ma podstawia jako koniec cookie, koniec całego tekstu
   }
  else
   {
    koniecCookie=document.cookie.indexOf(";",startCookie); // podstawia pod koniec miejsce występowania ";" (czyli początek następnego cookie)
   }
  textCookie=document.cookie.substring(startCookie,koniecCookie); //kopiuje treść cookie
  textCookie=unescape(textCookie); //rozkodowuje treść
  return textCookie; //zwraca wartość
}

Funkcje stosujemy podając jako parametr nazwę cookie jaką nadaliśmy mu podczas tworzenia np. czytaj_ciacho("ciastko1").

Modyfikowanie i usuwanie cookie

Aby zmodyfikować treść utworzonego cookie wystarczy je ponownie stworzyć z nowymi parametrami. Stare cookie zostanie zastąpione nowym. Inna sytuacja jest z usuwaniem cookie, JavaScript nie posiada żadnej funkcji umożliwiającej usunięcie utworzonego "ciasteczka". Aby pozbyć się jakiegoś cookie trzeba zmodyfikować (czyli utworzyć je jeszcze raz), nadając mu pustą wartość czyli document.cookie="ciastko1=". Nie usunie to całkowicie informacji o nim (pozostanie nazwa) lecz nie będzie ono odczytywane przez funkcję czytaj_ciacho().

Tyle o cookie, jak je zastosujesz zależy jedynie od twojej wyobraźni. Przykładowe skrypty znajdziesz w artcie pt. Cookie - zastosowania.

 Szczepan
mr.szczepan@poczta.fm
GG#2188590

Artykuł pochodzi z magazynu komputerowego @t.
Darmową prenumeratę możesz złożyć na www.at.w.pl