< JavaScript

JavaScript sütemény

Szerző: Sallai András

Copyright © 2011, Sallai András

Licenc: CC Attribution-Share Alike 4.0 International

Web: https://szit.hu

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:

Expires - Az adat mikor jár le. Ha üres, a süti lejár, ha látogató kilép a böngészőből.

Domain - A webhelyed neve.

Path - Az útvonal egy könyvtár vagy egy webhely, ahol be van állítva a süti. Ha üresen hagyjuk, a süti tartalma bárhonnan elérhető.

Secure - Ha ez a mező tartalmazza a secure szót, akkor csak biztonságos szerverről tölthető le a süti. Ha mező üres, nincs ilyen korlátozás.

Name=érték - Kulcs-érték pár.

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:

Mon

Tue

Wed

Thu

Fri

Sat

Sun

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:

http://blogs.sitepointstatic.com/examples/tech/js-session/session.js

Egy Demo hozzá:

http://blogs.sitepointstatic.com/examples/tech/js-session/index.html