Cookie w Javascript

Programując aplikacje webowe w tak "wdzięcznym" języku jak JavaScript (nie mylić z Javą) zachodzi czasem potrzeba przechowania stanu aplikacji, wartości pewnych zmiennych pomiędzy kolejnymi "odświeżeniami" stron. Cel ten można osiągnąć na wiele sposobów. Jednym z nich jest przechowywanie danych na serwerze, co jest oczywiście naturalne. Gdy jednak taka funkcjonalność byłaby trochę na wyrost (np. wygląd elementu strony, który jest różny dla każdego użytkownika) to proponuję zastosować ciasteczka (cookies) generowane bezpośrednio z kodu JavaScript-u.
Dostęp do cookies w przeglądarce udostępnia nam właściwość: document.cookie Na szczęście tym razem w każdej przeglądarce działa ona tak samo. Dzięki tej właściwości obiektu document możemy ustawiać i pobierać cookie i tak naprawdę są one odpowiednio sformatowanymi ciągami znaków. Najważniejszymi "parametrami" takiego ciągu są: nazwa i wartość oraz czas po którym ciasteczko traci ważność, oddzielone od siebie średnikiem (;). Format: name=value; expires=dataGMT
Aby zapisać ciasteczko w przeglądarce możemy napisać: document.cookie='nazwa=value; expires=data';
Aby odczytać takie ciasteczko to musimy sie już nieco więcej napracować (ale tylko troszkę). Właściwość document.cookie udostępnia nam string ze wszystkimi ciasteczkami które ustawiła nasza strona. Aby znaleźć to które nas interesuje musimy przeszukać ciąg znaków i odszukać interesującą nas nazwę. Najprościej chyba można to zrobić stosując wyrażenia regularne: document.cookie.match('name=(.*?)(;|$)'); gdzie name to nazwa którą poszukujemy. Jako rezultat otrzymujemy tablicę i w elemencie nr 1 wartość cookie. Pisząc rzeczywiste procedury warto przygotować sobie wcześniej odpowiednie funkcję do obsługi cookies. I tak dla przykładu podstawowe metody do ustawiania, usuwania i pobierania ciasteczek mogą wyglądać następująco:

  • Ustawianie ciasteczka:

    function setCookie(name, value, expires) {
    var string = name + "=" + escape(value);
    if(expires) {
    var data = new Date();
    data.setTime(data.getTime() + expires);
    string = string + ";expires=" + data.toGMTString();
    }
    document.cookie = string;
    }

    gdzie: name - nazwa, value - wartość, expires - czas w msek po którym ciasteczko będzie nie ważne lub null gdy ciasteczko ma być ważne tylko podczas aktualnej sesji.
  • Usuwanie ciasteczka:

    function delCookie(name) {
    var data = new Date();
    data.setTime(data.getTime() - 1);
    document.cookie = name + "=; expires=" + data.toGMTString();
    }
  • Pobieranie wartości:

    function getCookieValue(name) {
    var values = document.cookie.match(name + '=(.*?)(;|$)');
    if(values) {
    return unescape(values[1]);
    }
    return null;
    }

Mając ustawione ciasteczka możemy w odpowiednim zdarzeniu (np. body.load) wykonywać pewne czynności, które są zależne od wartości znajdującej się we wcześniej ustawionym cookie.