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.
A "sütikre" az alábbi korlátozások érvényesek:
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:
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.
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.