Vysvětlete rozdíl mezi cookies, sessionStorage a localStorage.

Alkalmazási terület: A cookie-k elérhetők mind kliens, mind szerver oldalról. sessionStorage és a localStorage csak kliens oldalról érhetők el.

Élettartam: A cookie-k esetében az élettartamot a létrehozáskor állítják be (expires vagy max-age attribútummal). Ha nem adnak meg, a cookie törlődik a böngésző bezárásakor. A sessionStorage csak az aktuális munkamenet idejére tárol adatokat (amíg be nem zárják a lapot vagy az ablakot). A localStorage adatait határozatlan ideig tárolja, amíg nem törlik őket.

Méret: A cookie-k maximális mérete kb. 4 KB. A sessionStorage és a localStorage mérete böngészőtől függően 5 MB és 10 MB között változik.

Küldés minden kérésnél: A cookie-k automatikusan elküldésre kerülnek minden HTTP-kérésnél a beállított domainhez, ami növelheti a forgalmat. A sessionStorage és a localStorage adatai nem kerülnek a szerverre.

Hozzáférési mód: A cookie-khoz való hozzáférés a document.cookie (karakterlánc) segítségével történik. A sessionStorage és a localStorage a megfelelő objektumokon keresztül érhető el a setItem, getItem, removeItem és clear metódusokkal.

// Cookie beállítása
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// Cookie lekérése
let x = document.cookie;

// Adatok beállítása sessionStorage-be
sessionStorage.setItem("lastname", "Smith");

// Adatok lekérése sessionStorage-ből
let y = sessionStorage.getItem("lastname");

// Adatok beállítása localStorage-be
localStorage.setItem("firstname", "Jane");

// Adatok lekérése localStorage-ből
let z = localStorage.getItem("firstname");

Jellemző	cookie-k	sessionStorage	localStorage
Alkalmazási terület	Kliens és Szerver	Csak Kliens	Csak Kliens
Élettartam	Létrehozáskor állítva (expires/max-age), vagy a böngésző bezárásáig	Az aktuális lap vagy ablak bezárásáig	Határozatlan ideig (kifejezett törlésig)
Méret	~4 KB	~5-10 MB (böngészőtől függően)	~5-10 MB (böngészőtől függően)
Küldés kéréskor	Igen	Nem	Nem
Hozzáférés	document.cookie	sessionStorage.getItem/setItem	localStorage.getItem/setItem