Cum sa folosesti localStorage si sessionStorage in JavaScript

In this tutorial, you'll learn about Cum sa folosesti localStorage si sessionStorage in JavaScript. We cover key concepts, practical examples, and best practices.

localStorage si sessionStorage permit stocarea de date in browser sub forma de perechi cheie-valoare. Acest ghid iti arata cum sa le folosesti corect si sigur.

Quick Fix

1. Scrierea si citirea datelor

Foloseste setItem() si getItem() pentru operatii de baza:

// Scriere
localStorage.setItem('username', 'ionpop');
localStorage.setItem('theme', 'dark');

// Citire
const username = localStorage.getItem('username');
console.log(username);

// Verificare existenta
if (localStorage.getItem('theme')) {
    console.log('Tema salvata:', localStorage.getItem('theme'));
}

ionpop
Tema salvata: dark

2. Stocarea obiectelor

localStorage stocheaza doar string-uri. Foloseste JSON:

const user = {
    name: 'Ion Popescu',
    preferences: {
        theme: 'dark',
        fontSize: 16,
        notifications: true
    }
};

// Salvare
localStorage.setItem('user', JSON.stringify(user));

// Citire
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name);
console.log(savedUser.preferences.theme);

Ion Popescu
dark

3. Stergerea datelor

removeItem() sterge o cheie, clear() sterge tot:

// Sterge o singura cheie
localStorage.removeItem('temporaryData');

// Sterge tot din localStorage
localStorage.clear();

// Verifica
console.log(localStorage.length);

0

4. Diferenta dintre localStorage si sessionStorage

localStorage persista dupa inchiderea browserului, sessionStorage se sterge la inchiderea tab-ului:

// Persista permanent
localStorage.setItem('preferences', 'dark');

// Se sterge cand tab-ul se inchide
sessionStorage.setItem('sessionId', 'abc123');
sessionStorage.setItem('cartItems', JSON.stringify(['laptop', 'mouse']));

5. Iterarea peste toate cheile

Foloseste key() sau Object.keys():

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');
localStorage.setItem('c', '3');

for (let i = 0; i < localStorage.length; i++) {
    const key = localStorage.key(i);
    const value = localStorage.getItem(key);
    console.log(`${key}: ${value}`);
}

a: 1
b: 2
c: 3

6. Gestionarea limitei de spatiu

localStorage are o limita de ~5-10MB. Prinde exceptiile:

function safeSetItem(key, value) {
    try {
        localStorage.setItem(key, value);
        return true;
    } catch (e) {
        if (e.name === 'QuotaExceededError') {
            console.error('Spatiu insuficient in localStorage');
            // Goleste date vechi sau notifica utilizatorul
            return false;
        }
        throw e;
    }
}

Prevention

• Seriaza intotdeauna obiectele cu JSON.stringify()/JSON.parse()
• Nu stoca date sensibile (parole, token-uri) in localStorage
• Trateaza exceptiile de spatiu cu try/catch
• Foloseste sessionStorage pentru date temporare de sesiune

Common Mistakes

1. A uita sa parsezi JSON -- localStorage.getItem('obj') returneaza string-ul "[object Object]", nu obiectul
2. A stoca date sensibile -- localStorage este accesibil din orice script JS, inclusiv XSS
3. A nu verifica existenta cheii -- getItem() returneaza null daca cheia nu exista
4. A presupune ca localStorage este disponibil -- in modul incognito sau sandbox-uri, localStorage poate arunca exceptii
5. A nu gestiona quota exceeded -- fara try/catch, aplicatia crapa cand spatiul este plin

FAQ

Construit de dezvoltatorii Doda Browser, DodaZIP si Durga Antivirus Pro. Instrumentele DodaTech se integreaza perfect cu JavaScript pentru productivitate si securitate sporite.