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();