A JavaScript
1998, Juray Tamás
11. fejezet: 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-t (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, 12-Mar-98  12:23:45 GMT

Ez 1998. március 12-é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:

A "sütik" és a JavaScript

A dokument 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égézsé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){                      // megvizsgáljuk, hogy vannak-e cookie-k
    offset = document.cookie.indexOf(search);           // ha igen, megkeressük az adott nevû elejét
    if (offset != -1){                                  // ha van ilyen akkor: 
      offset += search.length;
      end = document.cookie.indexOf(";", offset);       // az end egyenlõ a vizsgált cookie végét lezáró ; helyével
      if (end == -1) end = document.cookie.length;      // ha nincs pontosvesszõ akkor end egyenlõ a cookie sztring hosszával
      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 ezen az oldalon! Kérlek írd be a neved!","");
  
  if (user == null){
    alert("Nem írtad be a neved ezért a továbbiakban \"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 ezen az oldalon "+user+"! 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.
[ Befejezés ] [ Tartalomjegyzék] [ 10. fejezet ]