Explicați diferența dintre cookies, sessionStorage și localStorage.

Cookies, sessionStorage și localStorage sunt mecanisme de stocare web care diferă în scop, durată de viață și volumul de date stocate.

• Cookies: Fragmente mici de date trimise de serverul web și stocate pe calculatorul utilizatorului de către browserul web. Sunt trimise cu fiecare solicitare ulterioară către același server. Folosite pentru autentificare, stocarea preferințelor utilizatorului, urmărirea stării coșului de cumpărături.

  • Durata de viață: Stabilită la crearea lor (poate fi de sesiune sau cu o dată de expirare specifică).
  • Volum: Limitat, de obicei câțiva kilobyți (aproximativ 4 KB).

• sessionStorage: Stochează date doar pentru o sesiune de browser (filă sau fereastră deschisă). Datele sunt șterse la închiderea filei sau ferestrei.

  • Durata de viață: Până la închiderea filei sau ferestrei browserului.
  • Volum: Semnificativ mai mare decât în cazul cookie-urilor (de obicei câțiva megabytes).

• localStorage: Stochează date fără dată de expirare, până când sunt șterse în mod explicit de către utilizator sau script. Disponibil în toate filele și ferestrele aceluiași domeniu.

  • Durata de viață: Permanent (până la ștergere explicită).
  • Volum: Semnificativ mai mare decât în cazul cookie-urilor (de obicei câțiva megabytes).

Iată o comparație scurtă:

Mecanism	Durata de viață	Disponibilitate	Trimite către server	Volum (tipic)	Scop
Cookies	De sesiune sau cu expirare	Prin anteturi HTTP	Da	~4 KB	Autentificare, urmărire, preferințe
sessionStorage	Până la închiderea filei/ferestrei	Prin API JS	Nu	~5-10 MB	Stocare temporară a datelor de sesiune
localStorage	Permanent (până la ștergere)	Prin API JS	Nu	~5-10 MB	Stocare pe termen lung a datelor

Exemple de utilizare cu API JavaScript:

// Cookies (acces prin document.cookie, necesită parsare și serializare manuală)
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(); // Șterge toate datele din localStorage