Obsługa cookies w JavaScript.

javascript-html5-tutorial.pl

24 sierpnia, 2013

Dominik-W

W tym artykule poruszymy temat pracy z plikami cookies w JavaScript.

Obsługa cookies w JavaScript

Ciasteczka (ang. cookies) to niewielkie informacje tekstowe, wysyłane przez serwer WWW i zapisywane po stronie użytkownika (zazwyczaj na twardym dysku). Domyślne parametry ciasteczek pozwalają na odczytanie informacji w nich zawartych jedynie serwerowi, który je utworzył.

Ciasteczka są stosowane najczęściej w przypadku liczników, sond, sklepów internetowych, stron wymagających logowania, reklam i do monitorowania aktywności odwiedzających.

Składnia nagłówka HTTP dla cookie:

Set-Cookie: nazwa=x; expires=data; path=sciezka; domain=domena; secure

Opis parametrów:

nazwa=wartosc – wartość ta jest jedynym wymaganym atrybutem przy wysyłaniu ciasteczka. Składa się z dowolnych znaków z wyjątkiem średników, przecinków, białych spacji i slash’ów (/). Jeśli zajdzie potrzeba ich użycia, najczęściej koduje się je w formacie odpowiednim dla URL (%XX), gdzie XX to kod ASCII znaku (np. %2F to zakodowana postać slasha, a %20 – spacji)

expires=data – atrybut expires informuje przeglądarkę o dacie wygaśnięcia danego ciasteczka. Zostanie ono usunięte z dysku, gdy jego data ważności zostanie przekroczona. Jeśli nie podano daty wygaśnięcia, to ciasteczko zostanie usunięte po zakończeniu sesji. Data musi być podana w odpowiednim formacie – przykładowo: „Tuesday, 11-Nov-2007 08:39:09 GMT”

domain=domena – ten parametr określa widoczność ciasteczka. W trakcie sprawdzania pliku na komputerze klienta zawierającego ciasteczka, przeglądarka porównuje zapisaną domenę z domeną serwera, do którego wysyła nagłówki. Przeglądarka wysyła wszystkie nie przeterminowane ciasteczka, których domena jest zawarta w domenie serwera (dodatkowo może być sprawdzana ścieżka wywoływanego pliku i typ połączenia)

path=sciezka – atrybut path jest podawany w celu ograniczenia widoczności ciasteczka do danej ścieżki dostępu do katalogu. Wszystkie strony umieszczone w tym katalogu i jego podkatalogach będą mogły je wykorzystać

secure – ten parametr nie posiada wartości. Jeśli zostanie podany, to ciasteczko będzie widoczne (wysłane) tylko wtedy gdy połączenie będzie szyfrowane (obecnie możliwe przy użyciu protokołu HTTPS).

Prosty przykład – ustawianie cookie:

document.cookie = "myLang=PL";

Odczyt wygląda następująco:

var cookies = document.cookie.split(/; /g);

Podczas dostępu JavaScript pobiera listę wszystkich cookies, niestety nie postaci tablicy, lecz ciągu znaków. Musimy więc podzielić łańcuch, gdzie tokenem jest średnik. Następnie szukane są pierwsze znaki „=” dla cookie – jako wpisu nazwa=wartość.

Kody poniżej to zestaw funkcji do kompleksowej obsługi cookies w czystym JavaScript.

Utwórz cookie:

function writeCookie(cookieName, cookieValue, expires, domain,
    path, secureFlag) {
    if (cookieName) {
        var cookieDetails = cookieName + "=" + 
            escape(cookieValue);
        
        cookieDetails += (expires ? "; expires=" +
            expires.toGMTString(): '');

        cookieDetails += (domain ? "; domain=" + domain: '');
        cookieDetails += (path ? "; path=" + path: '');
        cookieDetails += (secureFlag ? "; secure": '');
        document.cookie = cookieDetails;
    }
}

Uzyskaj niezakodowaną wartość z cookies:

function readUnescapedCookie(cookieName) {
    var cookieValue = document.cookie;
    var cookieRegExp = new RegExp("\\b" + cookieName 
        + "=([^;]*)");
    
    cookieValue = cookieRegExp.exec(cookieValue);

    if (cookieValue != null) {
        cookieValue = cookieValue[1];
    }

    return cookieValue;
}

Uzyskaj wartość cookies:

function readCookie(cookieName) {
    cookieValue = readUnescapedCookie(cookieName)

    if (cookieValue != null) {
        cookieValue = unescape(cookieValue);
    }

    return cookieValue;
}

Usuń istniejące cookie(s):

function deleteCookie(cookieName) {
    var expiredDate = new Date();
    expiredDate.setMonth(-1);
    writeCookie(cookieName, "", expiredDate);
}

Utwórz cookie i nadaj pojedynczą wartość:

function writeMultiValueCookie(cookieName, multiValueName, 
value, expires, domain, path, secureFlag) {

    var cookieValue = readUnescapedCookie(cookieName);

    if (cookieValue) {
        var stripAttributeRegExp = new RegExp("(^|&)" +
            multiValueName + "=[^&]*&?");

        cookieValue = cookieValue.replace(
            stripAttributeRegExp, "$1");

        if (cookieValue.length != 0) {
            cookieValue += "&";
        }
    } else {
        cookieValue = "";
    }

    cookieValue += multiValueName + "=" + escape(value);
    var cookieDetails = cookieName + "=" + cookieValue;
    cookieDetails += (expires ? "; expires=" + expires.
        toGMTString(): '');
    cookieDetails += (domain ? "; domain=" + domain: '');
    cookieDetails += (path ? "; path=" + path: '');
    cookieDetails += (secureFlag ? "; secure": '');
    document.cookie = cookieDetails;
}

Uzyskaj pojedynczą wartość przechowywaną wewnątrz cookie:

function readMultiValueCookie(cookieName, multiValueName) {
    var cookieValue = readUnescapedCookie(cookieName);
    var extractMultiValueCookieRegExp = new RegExp("\\b" +
        multiValueName + "=([^;&]*)");

    cookieValue = extractMultiValueCookieRegExp.
        exec(cookieValue);

    if (cookieValue != null) {
        cookieValue = unescape(cookieValue[1]);
    }

    return cookieValue;
}

Usuń pojedynczą wartość przechowywaną wewnątrz cookie:

function deleteMultiValueCookie(cookieName, multiValueName,
    expires, domain, path, secureFlag) {
    
    var cookieValue = readUnescapedCookie(cookieName);

    if (cookieValue) {
        var stripAttributeRegExp = new RegExp("(^|&)" +
            multiValueName + "=[^&]*&?");

        cookieValue = cookieValue.replace(
            stripAttributeRegExp, "$1");

        if (cookieValue.length != 0) {
            var cookieDetails = cookieName + "=" + cookieValue;
            cookieDetails += (expires ? "; expires=" + 
                expires.toGMTString(): '');

            cookieDetails += (domain ? "; domain=" + domain: '');
            cookieDetails += (path ? "; path=" + path: '');
            cookieDetails += (secureFlag ? "; secure": '');
            document.cookie = cookieDetails;
        } else {
            deleteCookie(cookieName);
        }
    }
}

Sprawdź, czy włączona jest obsługa cookies w przeglądarce:

function cookiesEnabled() {

    var cookiesEnabled = window.navigator.cookieEnabled;

    if (!cookiesEnabled) {
        document.cookie = "cookiesEnabled=True";
        cookiesEnabled = new Boolean(document.cookie).
            valueOf();
    }

    return cookiesEnabled;
}

To właściwie już wszystko co potrzebne, by swobodnie pracować z cookies w JavaScript.

A dla dociekliwych, temat cookies pod lupą na stronach Mozilli.

W następnych artykułach pojawią się tematy takie jak AJAX, formularze i w końcu framework’i JavaScript.

Dziękuję za uwagę.