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

A cookie-k, sessionStorage és localStorage webtárolási mechanizmusok, amelyek céljukban, élettartamukban és tárolt adatok mennyiségében különböznek.

• Cookie-k: Kis adatrészek, amelyeket a webszerver küld és a felhasználó böngészője tárolja. Minden későbbi kérésnél ugyanahhoz a szerverhez küldik. Hitelesítésre, felhasználói preferenciák tárolására, kosár állapotának követésére használják.

  • Élettartam: Létrehozáskor állítják be (lehet munkamenet vagy meghatározott lejárati idő).
  • Mennyiség: Korlátozott, általában néhány kilobájt (körülbelül 4 KB).

• sessionStorage: Csak egy böngészési munkamenet idejére tárol adatokat (nyitott lap vagy ablak). Az adatok a lap vagy az ablak bezárásakor törlődnek.

  • Élettartam: A lap vagy az ablak bezárásáig.
  • Mennyiség: Jelentősen nagyobb, mint a cookie-k (általában néhány megabájt).

• localStorage: Adatok tárolása lejárati dátum nélkül, amíg azokat a felhasználó vagy szkript nem törli kifejezetten. Minden ugyanazon domainhez tartozó lapban és ablakban elérhető.

  • Élettartam: Állandó (a kifejezett törlésig).
  • Mennyiség: Jelentősen nagyobb, mint a cookie-k (általában néhány megabájt).

Íme egy rövid összehasonlítás:

Mechanizmus	Élettartam	Elérhetőség	Küldés a szervernek	Mennyiség (tipikus)	Cél
Cookie-k	Munkamenet vagy lejárati idő	HTTP fejlécen keresztül	Igen	~4 KB	Hitelesítés, követés, preferenciák
sessionStorage	Lap vagy ablak bezárásáig	JS API-n keresztül	Nem	~5-10 MB	Ideiglenes munkamenet adatok tárolása
localStorage	Állandó (a törlésig)	JS API-n keresztül	Nem	~5-10 MB	Hosszú távú adat tárolás

JavaScript API példák:

// Cookie-k (elérés document.cookie-n keresztül, manuális elemzés és serializálás szükséges)
document.cookie = "username=John Doe; expires=Thu, 18 Dec 2023 12:00:00 UTC; path=/";

// sessionStorage
sessionStorage.setItem('id', '123');
let userId = sessionStorage.getItem('id');
sessionStorage.removeItem('id');

// localStorage
localStorage.setItem('theme', 'dark');
let userTheme = localStorage.getItem('theme');
localStorage.removeItem('theme');
localStorage.clear(); // Törli az összes adatot a localStorage-ben