Tartalomjegyzék

< JavaScript

JavaScript sütemény

A sütikről

A süti angolul cookie. A böngészők és a szerverek HTTP protokollal kommunikálnak egymással. A HTTP egy állapotmentes protokoll. A weboldalakon, azonban sokszor szükség van a weblapok közötti állapot tárolására.

Általában statisztikákhoz, nyomon követéshez használjuk.

Hogyan működik

A szerver küld egy süteményt a böngésző számára, amiben adatok vannak. Ha a böngésző elfogadja a sütit, akkor egyszerű szöveges rekordként tárolja. A szerver később elkérheti a sütit a böngészőtől.

A sütik 5 változó hosszúságú mezőből állhatnak:

A sütik élettartalma

Alapértelmezés szerint a sütik a böngésző bezárása után megmaradnak. Az élettartamuk szabályozható másodpercekben a max-age attribútummal.

30 nap beállítása: 

document.cookie = "kulcs1=érték1; max-age=" + 30*24*60*60;

Az élettartam megadható az expires attribútummal is. Az attribútumot GMT/UTC formátumban kell megadni, és nem másodpercben. 

document.cookie = "kulcs1=érték1; expires=Fri, 31 Dec 2100 23:59:59 GMT";

Dátum konvertálása

Linux alapú rendszeren a dátum konvertálása: 

$ export LANG=en_US; date -R -d "2100-12-31 23:59:59"
Fri, 31 Dec 2100 23:59:59 +0100

A +0100-t át kell íri GMT-re: 

Fri, 31 Dec 2100 23:59:59 GMT

A napok névvel:

Süti

Létrehozás

document.cookie = "adat1=valami";
document.cookie = "igaz=true; expires=Fri, 31 Dec 2021 12:00:00 GMT";

Az aktuális lapon legyen tárolva (path): 

document.cookie ="valtozonev=tartalom; expires=Sat, 31 Dec 2011 12:00:00 UTC; path=/";

Kiolvasás

Az összes süti olvasása: 

document.write(document.cookie);
document.write(document.cookie.split("=")[1]);

Több süti közül az adat1 kiválasztása: 

const cookieValue = document.cookie
  .split('; ')
  .find(row => row.startsWith('adat1'))
  .split('=')[1];
 
 
console.log(cookieValue);
Vegyük észre az első split() függvényben a ; pontosvessző után a szóközt!

Függvényként: 

function getCookie(name) {
    let result = document.cookie
    .split('; ')
    .find(row => row.startsWith(name))
    .split('=')[1];    
    return result;
}

Másik lehetőség: 

function getCookie(cname) {
    let ca = document.cookie.split(';');
    let name = cname + "=";
    for(var item of ca) {
        while(item.charAt(0) == ' ') {
            item = item.substring(1);
        }
        if(item.indexOf(name) == 0) {
            return item.substring(name.length, item.length);
        }
    }
    return result;
}

Törlés

Törlésnél a múltba állítjuk a lejárati időt. 

document.cookie = "változónév=tartalom; expires=Sun, 31 Dec 2000 12:00:00 UTC; path=/";

vagy 

document.cookie = "kulcs1=érték1; max-age=0"

Munkamenet

sessionStorage.setItem('egy', 'első')
var res = sessionStorage.getItem('egy')

Linkek

A munkamenetre példa a következő helyen, Craig Buckler által:

Egy Demo hozzá: