Cookies :: StrefaWWW >> Webmaster, Kurs HTML, PHP, JavaScript, News

SZUKANA FRAZA:

Informacje:

Ostatnie artykuły

Cookies

Data publikacji: 2006-09-29
Autor: Timon

Cookies są to małe pliki tekstowe zapisywane na dysku przez przeglądarkę. JavaScript pozwala w dowolny sposób edytować i odczytywać zawartość tego pliku. Jeśli pytasz się w tej chwili po co zapisywać na dysku użytkownika plik tekstowy to podam Ci tylko jedną informację. Wszystkie języki skryptowe wykorzystywane w Internecie posiadają narzędzia do obsługi cookies. Jeżeli nadal mi nie wierzysz to zajrzyj do C:\Windows\Cookies a przekonasz się ile razy korzystałeś z tej technologii nawet o tym nie wiedząc. Wybór czy zastosujesz cookies na swojej stronie zależy od Ciebie. Jednak ja cookies polecam Ci już dziś.

Istnieją dwie metody pracy cookies: odczyt i zapis. My najpierw nauczmy się tego drugiego rozwiązania. Przeanalizujmy poniższy przykład:

<html>

<head>
<title>Zapis do cookies</title>
</head>

<body>
<script language="JavaScript">

var zmienna = "To zapiszę do cookie";

document.cookie = escape (zmienna);

</script>
</body>

</html>

Z HTML sprawa powinna być prosta. Przejdźmy zatem do skryptu. Na początku definiujemy zmienną o zadziwiająco trudnej nazwie "zmienna" :) Potem przypisujemy ten ciąg znaków do obiektu document.cookie; jest to tak proste jakbyś używał obiektu document.write. Odbywa się to na takiej samej zasadzie z jednym ważnym haczykiem. Otóż po znaku równość w drugiej linijce skryptu użyłem słowa escape jest to funkcja, która koduje dane w sposób zrozumiały dla przeglądarki przed zapisem do pliku. Jest to krok wymagany a zatem nie pomijaj go. Jak teraz odczytać to co zapisaliśmy? Jest to równie proste jak zapis.
Na początku do skryptu dodaj linię, która wyświetli nam odnośnik do strony, na której odczytamy cookie.

document.write('<a href="czytnik_cookie.html">Czytnik cookie</a>');
Teraz utwórzmy plik czytnik_cookie.html o następującej treści:

<html>

<head>
<title>Odczyt</title>
</head>

<body>
<script language="JavaScript">

alert(unescape(document.cookie));

</script>
</body>

</html>

Tak, jest to aż tak proste - wystarczyła tylko jedna linia kodu, aby odczytać cookie. Mimo to zanalizujmy ją. Pamiętasz jak używaliśmy metody escape - miała ona za zadanie przetworzyć cookie w sposób zrozumiały dla komputera. Teraz trzeba przemodelować cookie na tekst zrozumiały dla nas, więc używamy metody odwrotnej: unescape.

Dobra, jak do tej pory było bardzo prosto. Teraz zaczną się zagadnienia trudniejsze. Sposób, który przedstawiłem powyżej ma wiele wad. Najważniejszą z nich jest to, że po wyłączeniu przeglądarki cookie zostaje usunięte z komputera użytkownika.

Można jednak ustalić datę, po której cookie wygaśnie. Robi się to używając dwóch linii kodu:

var expiry  = new Date("Dezember 31, 2005");

expiry = expiry.toGMTString();

Do ciągu zapisywania cookie dodajesz tylko:

document.cookie = escape (zmienna) + ";expires=" + expiry;
W pierwszej linii kodu ustalasz do kiedy cookie ma być ważne. Równie dobrze mogłem napisać tak:

 var expiry  = new Date("August 31, 2055");

expiry = expiry.toGMTString();

Druga linia kodu konwertuje datę do formatu GMT. Jest to wymagany krok, bowiem data wygaśnięcia cookies musi być podana w tym formacie (GMT).

Przypuśćmy jednak, że istnieje kilka serwisów i każdy chce zapisać informacje do cookies. Ciastka staną się wtedy mało użyteczne, bowiem bardzo trudno byłoby wyciągnąć z cookie interesującą nas informację. W tym celu cookie można nadać nazwę. Popatrzmy na przykład:

var nazwa_cookie = "Moje";

document.cookie = nazwa_cookie + "=" + escape (zmienna);

Przeanalizujmy pierwszą najprostsza linię definiujesz zmienną, która następnie używana jest w obiekcie document.cookie. Ogólnie rzecz biorąc, aby nadać cookie nazwę powinieneś stosować następującą składnię:

document.cookie="nazwaCookie=zawartosc";
W ten sposób możesz do jednego katalogu przypisać więcej niż jedno cookies:

document.cookie="pierwszeCookie=zawartosc;drugieCookie=zawartosc;
trzecieCookie=zawartosc;itd=zawartosc";

Nasz przykład po wszystkich zmianach powinien wyglądać tak:

zapis_cookie.html:

<html>

<head>
<title>Zapis do cookies</title>
</head>

<body>
<script language="JavaScript">

// -------data po, której cookie wygasa 

var expiry  = new Date("Dezember 31, 2005");

expiry = expiry.toGMTString();

// --------nazwa cookie

var nazwa_cookie = "Moje";

// --------to co zapisujemy do cookie

var zmienna = "To zapiszę do cookie";

// --------zapis do cookie

document.cookie = nazwa_cookie + "=" + escape (zmienna) + ";expires=" + expiry;

// -------link do strony odczytującej cookie

document.write('<a href="czytnik_cookie.html">Czytnik cookie</a>');  

</script>
</body>

</html>

czytnik_cookie.html:

<html>

<head>
<title>Odczyt</title>
</head>

<body>
<script language="JavaScript">

// ---------odczyt w najprostszy możliwy sposób, choć mogłem się pobawić na zmiennych

//----------jest on bardzo prosty, jeśli istnieje ciasto o nazwie "Moje"

//----------wyświetli alert, że istnieje, jeśli nie, że nie istnieje 

if (document.cookie.indexOf("Moje")){

alert("A jednak zadziałało!");

}

else{

alert("Nie działa!");

}

</script>
</body>

</html>

Do czego może się to przydać? Zastosowania cookies są ogromne, począwszy od prostego skryptu informującego ile razy odwiedziłeś stronę, po zawansowane systemy logowania, dostosowania serwisu do swoich potrzeb itd. Oto przykład:

<html>

<body>
<SCRIPT LANGUAGE="JavaScript">

<!-- This script will show someone how many times that they have visited your website. It
also has a few humorous messages that you can give them when they arrive. 

function getCookieVal (offset) {
var endstr = document.cookie.indexOf (";", offset);
if (endstr == -1)
endstr = document.cookie.length;
return unescape(document.cookie.substring(offset, endstr));
}
function GetCookie (name) {
var arg = name + "=";
var alen = arg.length;
var clen = document.cookie.length;
var i = 0;
while (i < clen) {
var j = i + alen;
if (document.cookie.substring(i, j) == arg)
return getCookieVal (j);
i = document.cookie.indexOf(" ", i) + 1;
if (i == 0) 
break; 
}
return null;
}
function SetCookie (name, value) {
var argv = SetCookie.arguments;
var argc = SetCookie.arguments.length;
var expires = (2 < argc) ? argv[2] : null;
var path = (3 < argc) ? argv[3] : null;
var domain = (4 < argc) ? argv[4] : null;
var secure = (5 < argc) ? argv[5] : false;
document.cookie = name + "=" + escape (value) +
((expires == null) ? "" : ("; expires=" + expires.toGMTString())) +
((path == null) ? "" : ("; path=" + path)) +
((domain == null) ? "" : ("; domain=" + domain)) +
((secure == true) ? "; secure" : "");
}
function DisplayInfo() {
var expdate = new Date();
var visit;
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365)); 
if(!(visit = GetCookie("visit"))) 
visit = 0;
visit++;
SetCookie("visit", visit, expdate, "/", null, false);
var message;
if(visit == 1) 
message=" Welcome to my page!";
if(visit== 2) 
message=" I see you came back !";
if(visit == 3) 
message=" Oh, it's you again!";
if(visit == 4)
message=" You must be curious!"; 
if(visit == 5) 
message=" You're practically a regular!";
if(visit == 6) 
message=" You need a hobby!";
if(visit == 7)
message=" Nothing better to do?"; 
if(visit == 8) 
message=" Don't you ever sleep?";
if(visit == 9)
message=" Get a life!!!"; 
if(visit >= 10) 
message=" Rent is due on the 1st of the month!";
alert("\n"+"Your browser has visited this page \n"
+" "+visit+"\n"
+" time(s)."+"\n"+"\n"
+message);
}
function ResetCounts() {
var expdate = new Date();
expdate.setTime(expdate.getTime() + (24 * 60 * 60 * 1000 * 365)); 
visit = 0;
SetCookie("visit", visit, expdate , "/", null, false);
history.go(0);
}

window.onload=DisplayInfo

-->

</Script>

<!-- Supporting buttons that will let the viewer reload the page or reset the counter -->

<FORM>
<CENTER>
<INPUT NAME="update" TYPE="BUTTON" VALUE="Revisit Page" OnClick="history.go(0)">
<INPUT NAME="reset" TYPE="BUTTON" VALUE="Reset Counter" OnClick="ResetCounts()">
</CENTER>
</FORM>
</body>

</html>