Bevezetés a sütik használatába: A JavaScript sütik megértése és kezelése

Preslav Dobrev2022-10-25 · 7 min read

Bevezetés a sütik használatába: A JavaScript sütik megértése és kezelése

A böngésző sütik, vagy HTTP sütik, apró adatdarabkákból álló szöveges fájlok. A webhelyek ezeket az információkat a felhasználó’i útvonalának nyomon követésére használják, lehetővé téve számukra, hogy személyre szabott funkciókat kínáljanak és javítsák a böngészési élményt. A sütik legfeljebb 4096 bájtnyi adatot tárolhatnak. Azonban domainenként csak korlátozott számú sütit adhatunk hozzá, a böngészőtől függően.

A HTTP sütik alapvető megértése elengedhetetlen minden internetfelhasználó számára, függetlenül attól, hogy csak szórakozásból böngészik, vagy ebből él meg. Ez az útmutató részletesen bemutatja a sütiket és azok különböző típusait. Célunk, hogy segítsünk megérteni és kezelni a JavaScript sütiket.

Kezdjük el!

Előfeltételek

Az útmutató követéséhez a következőkre van szüksége:

Alapvető JavaScript ismeretek.

Első lépések a JavaScript sütikkel

A JavaScript sütikkel való munka rendkívül egyszerű. Lehetővé teszi a sütik könnyed létrehozását, szerkesztését és lekérését. Emellett a Document objektum cookie tulajdonságát is használhatjuk a sütik tulajdonságainak – mint például a név, érték és hossz – módosítására és korlátozására.

Sütitípusok

Először is nézzük meg a különböző sütitípusokat:

Első féltől származó sütik

Ezek a sütik minden alkalommal létrejönnek és tárolódnak, amikor a felhasználó meglátogat egy webhelyet. Lehetővé teszik a webhelytulajdonosok számára, hogy részletes betekintést nyerjenek a felhasználók adataiba, és jobb böngészési élményt biztosítsanak számukra.

Állandó sütik

Az ilyen típusú sütikhez a kibocsátó lejárati dátumot rendel. Ezért sokkal hosszabb ideig használatosak. Ez azt jelenti, hogy még ha be is zárja a böngészőt, a süti megmarad benne. Emellett az adatok minden alkalommal visszakerülnek a kibocsátóhoz, amikor meglátogatja a sütit létrehozó webhelyet.

Munkamenet-sütik

Ezek a sütik csak ideiglenesek, és a böngésző memóriájában tárolódnak, amíg az nyitva van. Amikor bezárja, a süti törlődik a böngésző előzményeiből, így kisebb biztonsági kockázatot jelentenek. Nem szükséges lejárati dátumot megadnia.

Harmadik féltől származó sütik

A harmadik féltől származó sütiket egy olyan webhely hozza létre, amelyet jelenleg nem látogat meg. Leggyakrabban ezek a sütik segítenek nyomon követni azt a felhasználót, aki rákattintott egy hirdetésre, összekapcsolva őt az őt átirányító domainnel.

Sütik létrehozása

A sütiket két módszerrel hozhatjuk létre:

Küldjön Set-Cookie-t a HTTP válaszfejlécben. A webszerverhez használt technológiáktól függően a süti-fejléceket eszközök és könyvtárak segítségével kezelheti. A sütik tartalmazhatnak olyan információkat, mint a lejárati dátum, valamint olyan biztonsági funkciókat, mint a secure direktíva és a HttpOnly jelző.

HttpOnly: Azt jelzi, hogy a böngésző nem tudja olvasni vagy módosítani a sütiket.
Secure: Ez azt jelzi, hogy a süti csak HTTPS-en keresztül küldhető el.

A JavaScript document.cookie tulajdonságának használatával sütiket hozhatunk létre, olvashatunk be és törölhetünk.

1. lépés — Süti létrehozása

A következőkben bemutatjuk a JavaScript süti létrehozásának folyamatát. A sütik név-érték pár formátumban kerülnek mentésre:

document.cookie = "UserName = CloudSigma";

1	document.cookie = "UserName = CloudSigma";

A fenti sütiben a UserName a süti neve, míg a CloudSigma a benne tárolt érték.

A süti rendelkezik lejárati dátummal. Alapértelmezés szerint a böngésző bezárásakor automatikusan törlődik. Lejárati dátumot is hozzáadhat a sütihez:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC";
document.cookie = "UserName = CloudSigma";

document.cookie = "UserName = CloudSigma";

expires=Fri, 11 Jun 2022 12:00:00 UTC";

document.cookie = "UserName = CloudSigma";

Alapértelmezés szerint a sütik az aktuális oldalhoz tartoznak. Azonban a sütit a path paraméter segítségével is meghatározhatjuk:

document.cookie = "UserName = CloudSigma"; 
expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

1 2	document.cookie = "UserName = CloudSigma"; expires=Fri, 11 Jun 2022 12:00:00 UTC; path=/";

Süti Max-Age vs Süti Expire

Az Ön igényeitől függően ezt a két stratégiát használhatja a süti lejárati dátumának beállítására. A kettő közötti különbség az, hogy az expires beállít egy lejárati dátumot, amikor a süti törlődik. Ezzel szemben a max-Age beállítja a másodpercekben megadott időt, amikor a süti törlésre kerül. Sajnos, max-age nem minden böngésző által támogatott.

Példa egy süti beállítására a expires és max-age:

Expires:

var d = new Date();
d.setTime(d.getTime() + 5*60*1000); // in milliseconds
document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

var d = new Date();

d.setTime(d.getTime() + 5*60*1000); // in milliseconds

document.cookie = 'foo=bar;path=/;expires='+d.toGMTString()+';';

Max-age :

document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

1	document.cookie = 'foo=bar;path=/;max-age='+5*60+';';

2. lépés — Süti olvasása

A document.cookie attribútum egy karakterláncot ad vissza. Ha két vagy több süti van, pontosvesszőt ( ;) és szóközt használunk az elválasztásukra.

A split() metódust használjuk egy egyedi süti kinyerésére a sütik listájából. Ez a metódus felosztja a listát egyedi név-érték párokra. Ha ez kész, keresheted a beolvasni kívánt célsütit:

function setCookie(name, count, validityCheck) {
    var cookie = name + "=" + encodeURIComponent(value);
    if(typeof validityCheck === "number") {
        cookie += "; max-age=" + (validityCheck*24*60*60);
        document.cookie = cookie;
    }
}

function getCookie(name) {
    var cookieArr = document.cookie.split(";");
    for(var i = 0; i < cookieArr.length; i++) {
    var cookiePair = cookieArr[i].split("=");
    if(name == cookiePair[0].trim()) {
        return decodeURIComponent(cookiePair[1]);
    }
}
    return null;
}

function checkCookie() {
    var UserName = getCookie("UserName");
    if(UserName != "") {
    alert("Welcome again, " + UserName);
} else {
    firstName = prompt("Enter your UserName:");
        if(UserName != "" && UserName != null) {
            setCookie("UserName", UserName, 30);
        }
    }
}

function setCookie(name, count, validityCheck) {

var cookie = name + "=" + encodeURIComponent(value);

if(typeof validityCheck === "number") {

cookie += "; max-age=" + (validityCheck*24*60*60);

document.cookie = cookie;

}

function getCookie(name) {

var cookieArr = document.cookie.split(";");

for(var i = 0; i < cookieArr.length; i++) {

var cookiePair = cookieArr[i].split("=");

if(name == cookiePair[0].trim()) {

return decodeURIComponent(cookiePair[1]);

}

return null;

}

function checkCookie() {

var UserName = getCookie("UserName");

if(UserName != "") {

alert("Welcome again, " + UserName);

} else {

firstName = prompt("Enter your UserName:");

if(UserName != "" && UserName != null) {

setCookie("UserName", UserName, 30);

}

Értsük meg a kódban létrehozott függvényeket:

Függvény neve	Leírás
setCookie()	Létrehoz egy sütit
getCookie()	Beolvassa a süti értékét
checkCookie()	Ellenőrzi, hogy a UserName be van-e állítva vagy sem.

A következő lépésben megtanuljuk, hogyan kell frissíteni egy sütit.

3. lépés — Süti frissítése

Új értékeket állíthatunk be a süti attribútumaihoz. Példánkban frissítsük a felhasználó előfizetését havi tervről negyedéves tervre.

Frissítsük a max-age attribútumát a UserName sütinek 30 napról 180 napra:

document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60;
document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

1 2	document.cookie = "UserName=CloudSigma; path=/; max-age=" + 30 * 24 * 60 * 60; document.cookie = "UserName=CloudSigma; path=/; max-age=" + 90 * 24 * 60 * 60;

4. lépés — Süti törlése

A süti azonos névvel történő átnevezése törli a törölni kívánt sütit. Egy sütit úgy törölhetünk, hogy a max-age attribútumát a következőre állítjuk: 0:

document.cookie = "UserName=; max-age=0";

1	document.cookie = "UserName=; max-age=0";

Ezenkívül, ha a sütihez meg van adva egy útvonal, a törléséhez azt is meg kell adni:

document.cookie = "Username = ExcellentDesign; Path = /";

1	document.cookie = "Username = ExcellentDesign; Path = /";

Összegzés

A sütik szükségesek a weboldalak megfelelő működéséhez. Ebben a bevezető útmutatóban részletesen bemutattuk a sütiket és azok különböző típusait. Emellett egy példa segítségével megtanultuk a sütik kezelését is. Most, hogy már magabiztosan használja a JavaScript sütiket, kezdjen el egyéni sütiket létrehozni, hogy még többet tudjon meg a témáról.

Emellett számos JavaScripttel és webfejlesztéssel kapcsolatos útmutatót is felfedezhet a blogunkon:

Kellemes kódolást!

Preslav Dobrev

Szerző · CloudSigma

Preslav Dobrev a CloudSigma kreatív tervezője, aki hagyományos és innovatív marketingcsatornák segítségével következetes vállalati identitás kialakítására összpontosít. Kiemelkedően képes ötvözni a művészi látásmódot a stratégiai marketinggel, hogy hatásos márkatörténeteket hozzon létre.