
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ę.