Sobes.tech
Junior

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

sobes.tech AI

Răspuns de la AI

Mecanism Dimensiune (aproximativ) Durata de viață Acces Se transmite către server Utilizare
Cookies 4 KB Data de expirare stabilită de server sau browser Documentul curent și subdomenii (în funcție de setări) La fiecare solicitare HTTP Autentificare, urmărire, setări personalizate ale utilizatorului
localStorage 5-10 MB Nelimitat (atâta timp cât utilizatorul nu șterge) Doar originul curent (protocol, domeniu, port) Nu Stocarea preferințelor utilizatorului, date despre starea aplicației
sessionStorage 5-10 MB Până la închiderea filei/fereastrei browser-ului Doar originul curent (protocol, domeniu, port) Nu Stocarea temporară a datelor sesiunii utilizatorului

Cookies:

  • Sunt trimise cu fiecare solicitare HTTP către server, ceea ce poate crește traficul.
  • Scop principal: identificarea utilizatorului (cookie-uri de sesiune), memorarea preferințelor, urmărirea acțiunilor utilizatorului.
  • Disponibile atât pe partea client (JavaScript), cât și pe partea server.
  • Pot fi limitate de domeniu și cale.
  • Considerate mai puțin sigure pentru stocarea datelor sensibile din cauza trimiterii automate către server.

localStorage:

  • Datele sunt stocate local în browserul utilizatorului.
  • Folosit pentru stocare permanentă a datelor care nu trebuie trimise către server la fiecare solicitare.
  • Are o API JavaScript simplă.
  • Datele sunt stocate sub formă de perechi cheie-valoare.
  • Nu sunt accesibile din alte origin.
// Setare valoare
localStorage.setItem('username', 'john.doe');

// Obținere valoare
let username = localStorage.getItem('username');

// Ștergere valoare
localStorage.removeItem('username');

// Ștergere tot localStorage
localStorage.clear();

sessionStorage:

  • Similar cu localStorage, dar datele sunt stocate doar până la închiderea filei sau ferestrei browser-ului.
  • Ideal pentru stocarea temporară a datelor legate de sesiunea curentă a utilizatorului (ex. date formular, coș de cumpărături).
  • Are, de asemenea, o API JavaScript simplă, similară cu localStorage.
  • Datele sunt disponibile doar în originul curent.
// Setare valoare
sessionStorage.setItem('sessionId', 'abc123');

// Obținere valoare
let sessionId = sessionStorage.getItem('sessionId');

// Ștergere valoare
sessionStorage.removeItem('sessionId');

// Ștergere tot sessionStorage
sessionStorage.clear();