Sütik be JavaSzkript: Set, Get & Delete Példa

Mik azok a sütik?

A süti (cookie) egy olyan adat, amelyet a számítógéped tárol, és amelyhez a böngésződ hozzáférhet. Lehet, hogy tudatosan vagy tudattalanul is élvezted a sütik előnyeit. Maradtál már bejelentkezve egy olyan oldalra, mint a Facebook, hogy ne kelljen minden egyes bejelentkezéskor megadnod az adataidat? Ha igen, akkor sütiket használsz. A sütik kulcs/érték párokként vannak mentve.

Fontos pontosítás: a süti nem tárolja a jelszavadat. Egy munkamenet-azonosítót tárol, ami egy véletlenszerű token, amelyet a szerver ad ki a sikeres bejelentkezés után. A szerver ezt a tokent összekapcsolja a fiókoddal, így maga a jelszó soha nem hagyja el a szervert.

Miért van szüksége sütire?

A kommunikáció a webböngésző és a szerver közötti átvitel egy HTTP nevű állapot nélküli protokollt használ. Az állapot nélküli protokoll minden kérést külön kezel. Tehát a szerver nem őrzi meg az adatokat a böngészőnek küldés után. Sok esetben azonban ismét szükség lesz az adatokra. Itt jönnek a képbe a sütik. A sütik segítségével a webböngészőnek nem kell minden alkalommal kommunikálnia a szerverrel, amikor az adatokra szükség van. Ehelyett közvetlenül a számítógépről lehet azokat letölteni.

Tipikus felhasználási módok közé tartozik a bejelentkezési munkamenet megjegyzése, nyelvi vagy témabeállítás tárolása, keeping tételek egy üzletbenping a kosár elhelyezése az oldalak között, és az első látogatók és a visszatérő látogatók számának meghatározása.

Javascript Cookie beállítása

A document.cookie tulajdonsággal hozhatsz létre sütiket, például így.

document.cookie = "cookiename=cookievalue"

Akár lejárati dátumot is megadhatsz a sütidhez, így az adott süti a megadott napon törlődik a számítógépről. A lejárati dátumot UTC/GMT formátumban kell megadni. Ha nem állítod be a lejárati dátumot, a süti akkor törlődik, amikor a felhasználó bezárja a böngészőt.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC"

Beállíthatod a domaint és az elérési utat is, hogy meghatározd, melyik domainhez és az adott domain mely könyvtáraihoz tartozzon a süti. Alapértelmezés szerint a süti ahhoz az oldalhoz tartozik, amely beállítja azt.

document.cookie = "cookiename=cookievalue; expires= Thu, 21 Aug 2031 20:00:00 UTC; path=/ "

//hozzon létre egy sütit az aktuális oldal domainjével és a teljes domaint lefedő elérési úttal.

JavaSzkript süti lekérése

A sütit így érheti el, amely visszaadja az aktuális domainhez mentett összes sütit.

var x =  document.cookie

A visszaadott érték egyetlen karakterlánc az űrlapon name1=value1; name2=value2Nincs beépített metódus egyetlen süti név szerinti beolvasására, ezért a karakterláncot fel kell darabolni. Az alábbi segítő egyetlen értéket és egy üres karakterláncot ad vissza, ha a név hiányzik.

function getCookie(name) {
    const pairs = document.cookie.split(";");
    for (let i = 0; i < pairs.length; i++) {
        const pair = pairs[i].trim();
        if (pair.indexOf(name + "=") === 0) {
            // decode in case the value contained spaces or symbols
            return decodeURIComponent(pair.substring(name.length + 1));
        }
    }
    return "";
}

document.cookie = "username=Ann Smith; path=/";
console.log(getCookie("username"));
console.log(getCookie("missing") === "");

output:

Ann Smith
true

JavaSzkript törlése cookie

Egy süti törléséhez csak a süti értékét üresre kell állítani, az expires értékét pedig egy már elmúlt dátumra.

document.cookie = "cookiename= ; expires = Thu, 01 Jan 1970 00:00:00 GMT"

A legtöbb sikertelen törlést egyetlen részlet okozza. A böngésző a sütit a nevével, elérési útjával és domainjével azonosítja, ezért a törlési utasításnak meg kell ismételnie ugyanazt az elérési utat és domaint, amelyet a süti létrehozásakor használtak.

// created with an explicit path
document.cookie = "theme=dark; path=/; max-age=2592000";

// deletion must repeat that same path
document.cookie = "theme=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT";

// max-age=0 achieves the same result in one shorter line
document.cookie = "theme=; path=/; max-age=0";

Süti attribútumok magyarázata

Az első pontosvessző utáni minden attribútum megváltoztatja a süti élettartamát, azt, hogy mely kérések hordozzák, és melyik kód olvashatja be. Az alábbi hivatkozás mindegyiket lefedi.

A SameSite különös figyelmet érdemel, mivel a böngészők most egy alapértelmezett értéket alkalmaznak. A három elfogadott érték a következőképpen viselkedik.

• Szigorú: A süti soha nem kerül elküldésre, ha a kérés egy másik oldalról származik, ami a legbiztonságosabb beállítás banki munkamenetekhez.
• Laza: A süti a legfelső szintű navigációval, például egy hivatkozásra kattintással együtt utazik, de nem webhelyek közötti képekkel vagy keretekkel. Ez a modern böngésző alapértelmezett beállítása.
• Egyik sem: A süti minden webhelyek közötti kéréskor elküldésre kerül, és párosítani kell a Secure attribútummal, ellenkező esetben a böngésző elutasítja.

// a well configured cookie set from client side script
document.cookie = "language=en; path=/; max-age=31536000; SameSite=Lax; Secure";

Próbálja ki Ön is ezt a példát

Az alábbi szkript mindhárom műveletet egyesíti. Létrehoz egy napokban mért lejárati idejű sütit, név szerint beolvassa, majd üdvözli a visszatérő látogatót. Speciális utasítások a kód működéséhez … Nyomja meg kétszer a futtatás gombot.

<html>
<head>
	<title>Cookie!!!</title>
	<script type="text/javascript">
		function createCookie(cookieName,cookieValue,daysToExpire)
        {
          var date = new Date();
          date.setTime(date.getTime()+(daysToExpire*24*60*60*1000));
          document.cookie = cookieName + "=" + cookieValue + "; expires=" + date.toGMTString();
        }
		function accessCookie(cookieName)
        {
          var name = cookieName + "=";
          var allCookieArray = document.cookie.split(';');
          for(var i=0; i<allCookieArray.length; i++)
          {
            var temp = allCookieArray[i].trim();
            if (temp.indexOf(name)==0)
            return temp.substring(name.length,temp.length);
       	  }
        	return "";
        }
		function checkCookie()
        {
          var user = accessCookie("testCookie");
          if (user!="")
        	alert("Welcome Back " + user + "!!!");
          else
          {
            user = prompt("Please enter your name");
            num = prompt("How many days you want to store your name on your computer?");
            if (user!="" && user!=null)
            {
            createCookie("testCookie", user, num);
            }
          }
        }
	</script>
</head>
<body onload="checkCookie()"></body>
</html>

Várható viselkedés:

First run  : "Please enter your name"  -> Ann
             "How many days you want to store your name on your computer?" -> 5
Second run : alert box shows  Welcome Back Ann!!!

Code magyarázat: A createCookie függvény a napok számát milliszekundummá alakítja, és hozzáadja az aktuális időhöz, ami a lejárati dátumot adja. Az accessCookie függvény pontosvesszőkre bontja a süti karakterláncot, megvágja az egyes töredékeket, és összehasonlítja a töredék kezdetét a kért névvel. A checkCookie függvény a kettőt az oldal betöltésekor köti össze.

Sütik vs. helyi tárolás vs. munkamenet-tárolás

A böngészők nem csak a sütiken tárolhatnak adatokat. Két webtárhely-lehetőség létezik, és a helyes kiválasztással elkerülhető a felesleges bájtok küldése minden kérésnél.

A gyakorlati szabály egyszerű. Ha a szervernek szüksége van az értékre, használj sütit. Ha csak az oldalnak van rá szüksége, használd a localStorage vagy a sessionStorage értékeket, mivel ezek az értékek soha nem adnak súlyt egy hálózati kéréshez.

A sütikezelő kód általában sok oldalon megosztott, ezért tekintse át belső és külső JavaForgatókönyv mielőtt eldöntené, hová helyezi. Az itt használt húrfelosztás a következőre épül JavaSzkriptkarakterláncok és a JavaSzkript tömbmetódusok, és további működő szkriptek jelennek meg a gyakorlati JavaSzkriptkód példák.

GYIK