Magyarázd el a különbséget a cookie-k, sessionStorage és localStorage között.

A cookie-k kis mennyiségű szöveges információt (legfeljebb 4KB) tárolnak az ügyfél oldalon, minden HTTP-kérésnél elküldik a létrehozó domainhez. Lehetnek lejárati idejük. Felhasználásuk: hitelesítés, felhasználók követése, felhasználói preferenciák mentése.

A localStorage adatok tárolására szolgál lejárati idő nélkül (amíg a felhasználó nem törli az adattárolót vagy nem zárja be a böngészőt), az ügyfél oldalon (5-10MB, böngészőtől függően). Az adatok a böngészési munkamenetek között elérhetők, de csak ugyanabból a származásból (domain, protokoll, port) származó szkriptek számára. Nem küldik automatikusan HTTP-kérésekkel. Tartós adattárolásra, alkalmazásbeállítások mentésére használják.

A sessionStorage adatok egy böngészési munkamenet idejére (amíg a lap vagy az ablak nyitva van) tárolódnak. Az adatok törlődnek a lap vagy az ablak bezárásakor. A tárolási méret hasonló a localStorage-hoz (5-10MB). Az adatok csak ugyanabból a származásból származó szkriptek számára elérhetők. Nem küldik automatikusan HTTP-kérésekkel. Ideiglenes adatok tárolására, az aktuális munkamenethez kapcsolódó adatok mentésére használják.

Jellemzők	Cookies	localStorage	sessionStorage
Tárolási idő	Lejárati idő vagy böngésző bezárása	Amíg nem törli a felhasználó vagy az alkalmazás	Amíg a lap vagy az ablak nyitva van
Adatmennyiség	Legfeljebb 4KB	Legfeljebb 5-10MB	Legfeljebb 5-10MB
Elérhetőség	Küldik HTTP-kérésekkel a domainhez	Csak ugyanabból a származásból származó JavaScript által	Csak ugyanabból a származásból származó JavaScript által
Külön lapok közötti elérhetőség	Igen	Igen	Nem (külön lapok esetén)
Célja	Hitelesítés, követés, preferenciák	Tartós tárolás, beállítások	Ideiglenes tárolás a munkamenet során

Példa a localStorage használatára:

// Adatok mentése
localStorage.setItem('userName', 'Alice');

// Adatok lekérése
const userName = localStorage.getItem('userName');
console.log(userName); // Kimenet: Alice

// Adatok törlése
// localStorage.removeItem('userName');

// Összes tárolt adat törlése
// localStorage.clear();

Példa a sessionStorage használatára:

// Adatok mentése
sessionStorage.setItem('orderId', '12345');

// Adatok lekérése
const orderId = sessionStorage.getItem('orderId');
console.log(orderId); // Kimenet: 12345

// Adatok törlése
// sessionStorage.removeItem('orderId');

// Összes tárolt adat törlése
// sessionStorage.clear();