A "sütik"
Elérkeztünk utolsó témánkhoz a
"sütikhez", angol nevén cookies. Mire jók ezek? Tudjuk,
hogy a HyperText Transfer Protocoll (HTTP) nem alkalmas arra, hogy
kapcsolatot teremtsen két felhasználói (kliens)
kérés között. Tegyük fel például,
hogy egy olyan oldalt szeretnénk készíteni, amely
felismeri azt, hogy ha valaki már nem az elsõ alkalommal
látogatja meg, és ismerve azt, hogy elõzõleg
milyen témákat tartalmazó oldalakat járt be az
illetõ, most máshová küldi.
A sütik segítségével adatokat tárolhatunk
a felhasználó gépén. Persze nem kell megijedni,
ezek lényegében veszélytelen információk,
mégpedig a cookies.txt állományban megjelenõ
szöveges bejegyzések. Formátumuk a következõ:
név=érték;expires=dátum;
Elõször megadjuk az adat nevét, majd az
egyenlõség másik oldalán az adat
értéke áll. Ha a név ill. az
érték tartalmaz vesszõ, pontosvesszõ
vagy szóköz karaktereket, akkor az
escape() függvényt kell felhasználni, hogy
megfelelõ formában kódoljuk, és az
unescape() függvényt, hogy visszakódolhassuk.
Az expires mezõ tartalmazza az érvényesség
dátumát. A dátumot GMT formátumban kell megadni,
amely a következõ:
Nap, NN-HHH-ÉÉ ÓÓ:PP:MP GMT
Például: Wed, 13-Oct-99 12:23:45 GMT
Ez 1999. október 13-át, egy szerdai napot (Wed) ad meg,
egészen pontosan 12 óra 23 perc 45 másodpercet.
Egyszerûbben úgy adhatunk meg ilyen formátumú
idõt. hogy a Date által visszaadott dátumot a
toGMTString() függvénnyel ilyen formátumúra
hozzuk.
Megszorítások
A "sütikre" az alábbi korlátozások
érvényesek:
- legfeljebb 300 ilyen bejegyzés lehet a cookies.txt file-ban
- egy bejegyzés mérete legfeljebb 4Kb
- szerverenként vagy domain-enként legfeljebb 20 "süti" lehet
A "sütik" és a JavaScript
A document objektum cookies mezõje egy sztring,
amely tartalmazza a Netscape Navigator összes bejegyzését,
ami a cookies.txt állományban található.
A "sütikkel" a következõket tehetjük:
- beállíthatjuk az értékét
illetve az érvényességi idejét
- megkaphatjuk az értékét a megadott
nevû "sütinek"
A Netscape dokumentációja a következõ
függvényeket javasolja ezen mûveletek
elvégzéséhez:
1. az érték és az opcionális
érvényességi idõ beállítása:
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()))
}
A függvény mûködése rendkívül
egyszerû. Paraméterként adjuk át a cookie
nevét, értékét, érvényességi
dátumát. A függvény a name (név)
paraméternek olyan sztringet vár, amelyben nincs az
elõzõekben említett speciális karakter.
A value sztringet kódoljuk az escape()
függvénnyel, hogy a sztringben lévõ
pontosvesszõk, vesszõk, szóközök helyesen
kerüljenek tárolásra, majd hozzáfûzzük
a name sztringhez. Ha nem adtunk meg dátumot (azaz a paraméter
értéke null), akkor egy üres sztringet, ellenkezõ
esetben a toGMTString() függvénnyel GMT formátumra
hozott sztringet fûzzük az elõzõekhez.
2. adott nevû cookie értékének visszaadása
function getCookie(Name){
var search = Name + "=";
if (document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if (offset != -1){
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
}
}
A függvény a search sztringbe helyezi a keresendõ
nevû cookie elejét (azaz a nevet és az azt követõ
"=" jelet). Ha a document.cookie sztring hossza nagyobb 0-nál,
akkor tartalmaz bejegyzéseket. Ebben az esetben megnézzük
a már ismert indexof() függvény segítségével,
hogy létezik-e a keresett bejegyzés. Ha nem, akkor az offset
tartalma -1 lesz, ellenkezõ esetben az offset tartalma a
search sztring elsõ pozíciója. Ekkor megkeressük
a cookie végét jelzõ pontosvesszõ pozícióját.
Ez kerül az end változóba. Ha ilyen nincs, akkor
a cookie vége a document.cookie sztring vége lesz.
Legvégül pedig visszaadjuk az unescape() függvénnyel
helyesen dekódolt cookie-t, ami a document.cookie sztring
offset és end pozíciók közötti
része lesz.
Példa a "süti" használatára
Az alábbi gombra kattintva megtekinthetjük a fejezetet
lezáró, az eddig tanultakat bemutató példát
mûködés közben.
A kód pedig a következõ:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!-- JavaScript kód rejtése
function setCookie(name, value, expire) {
document.cookie = name + "=" + escape(value)
+ ((expire == null) ? "" : ("; expires=" + expire.toGMTString()));
}
function getCookie(Name){
var search = Name + "=";
if (document.cookie.length > 0){
offset = document.cookie.indexOf(search);
if (offset != -1){
offset += search.length;
end = document.cookie.indexOf(";", offset);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(offset, end));
}
}
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
<!--
var user = getCookie("greeting");
if (user == null){
user = prompt("Köszöntelek az oldalamon! Kérlek írd be a neved!","");
if (user == null){
alert("Nem írtad be a neved ezért \"Fantomnak\" nevezlek!");
user = "Fantom";
}
expDate = new Date();
expDate.setTime(expDate.getTime() + (365*24*60*60*1000));
setCookie('greeting',user,expDate);
document.write("Ha legközelebb visszatérsz, már megismerlek!");
}
else{
document.write("Üdvözöllek ismét "+user+"!");
document.write("Látom visszatértél.");
}
//-->
</SCRIPT>
</BODY>
</HTML>
Rögtön az elején lekérdezzük a getCookie()
függvénnyel, hogy létezik-e a "greeting"
bejegyzés. Ha nem, akkor megjelenítünk egy input ablakot
a prompt() függvénnyel. Ha a felhasználó
nem írt be semmit, akkor a user sztring továbbra is
null, ezért egy alapértelmezett értéket
adunk neki (Fantom). Majd létrehozzuk az expDate
objektumot (érvényességi dátum), ami az
aktuális dátumot tartalmazza. Ezt az értéket
megnöveljük 1 évvel (ezredmásodpercekben
számolva; 365*2*60*60*1000), majd a setCookie()
függvénnyel beírjuk a user értéket illetve
az érvényességi dátum értékét.
Ennek hatására, ha az elkövetkezendõ
1 évben visszatérünk a példát tartalmazó
oldalra, akkor az adott oldal felismer bennünket. Ha a "greeting"
bejegyzés már korábban létezett, akkor nincs
más dolgunk, mint megjeleníteni azt az értéket,
ami a korábban már ott járt felhasználó
nevét tartalmazza.
|