Leírások+Referenciák / JavaScript / XI. Cookiek (sütik)

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.

<< Vissza a tartalomhoz

Tovább a befejezéshez>>