🗄️ LocalStorage e SessionStorage in JavaScript: Guida Completa

Pubblicato da

  


Oggi per qualsiasi sito web moderno gestire i dati lato client in modo efficiente è fondamentale. JavaScript mette a disposizione due strumenti potenti per questo scopo: LocalStorage e SessionStorage. Entrambi permettono di salvare informazioni nel browser dell’utente, ma con caratteristiche e finalità differenti.

🔗 Ti piace Techelopment? Dai un'occhiata al sito per tutti i dettagli!

📚 Che cos’è la Web Storage API?

La Web Storage API è una specifica del W3C che fornisce un meccanismo semplice per memorizzare coppie chiave/valore nel browser. Questa API comprende:

  • 🗃️ localStorage → memorizza i dati in modo permanente
  • 🧭 sessionStorage → memorizza i dati temporaneamente, per una sola sessione

Entrambe sono più efficienti e semplici da usare rispetto ai cookie, e non vengono inviate automaticamente al server in ogni richiesta HTTP, migliorando così le performance.


🔍 Differenze principali tra LocalStorage e SessionStorage

🔧 Caratteristica 🗃️ local
Storage		 🧭 session
Storage
⏳ Persistenza Permanente (finché non rimossa) Temporanea (finché la scheda resta aperta)
📁 Ambito Tutte le schede dello stesso dominio Solo nella scheda corrente
📦 Spazio disponibile Circa 5–10 MB (dipende dal browser) Circa 5–10 MB (dipende dal browser)
🧩 Condivisione Tra finestre/schede dello stesso dominio Non condivisa tra schede
🛠️ Sintassi/API Uguale per entrambi Uguale per entrambi

🧰 API disponibili

Entrambe le API usano gli stessi metodi:

  • 📝 setItem(key, value) → salva un dato
  • 🔎 getItem(key) → legge un dato
  • ❌ removeItem(key) → elimina un singolo dato
  • 🧹 clear() → elimina tutti i dati

✅ Aggiungere dati

localStorage.setItem('username', 'Alice');
sessionStorage.setItem('sessionId', 'abc123');

🔍 Recuperare dati

const name = localStorage.getItem('username');
const id = sessionStorage.getItem('sessionId');

❌ Eliminare dati

localStorage.removeItem('username');
sessionStorage.removeItem('sessionId');

🧼 Pulire tutto

localStorage.clear();
sessionStorage.clear();

🧪 Esempi Pratici di Utilizzo

🗃️ LocalStorage: salvare preferenze utente

// Save user's theme preference
localStorage.setItem('theme', 'dark');

// Load preference on next visit
const savedTheme = localStorage.getItem('theme');
if (savedTheme) {
  document.body.classList.add(savedTheme);
}

🧭 SessionStorage: stato temporaneo durante la sessione

// Save current step of a multi-step form
sessionStorage.setItem('formStep', '2');

// Restore step on reload (same tab only)
const step = sessionStorage.getItem('formStep');
if (step) {
  goToFormStep(parseInt(step, 10));
}

📋 Quando usare LocalStorage o SessionStorage?

🗃️ Usa localStorage se:

  • 💾 Vuoi persistenza a lungo termine, anche dopo il riavvio del browser
  • 🎨 Salvi preferenze utente (es. tema, lingua)
  • 🔄 Memorizzi dati da usare in più sessioni
  • 🔌 Hai una web app offline che deve mantenere dati tra accessi

🧭 Usa sessionStorage se:

  • 🔐 I dati sono sensibili e devono sparire a fine sessione
  • 🧪 Hai un form multi-step da completare in una singola visita
  • 🪟 Vuoi evitare interferenze tra più schede aperte
  • 🔄 Stai gestendo dati temporanei come uno stato di scroll

⚠️ Limitazioni importanti

⛔ Non salvare dati sensibili

Tutti i dati salvati in LocalStorage o SessionStorage sono accessibili da JavaScript e non criptati. Non usarli per memorizzare password, token di autenticazione, dati personali o sensibili.

🔤 Solo stringhe

Entrambe le API salvano solo stringhe. Per salvare oggetti complessi, devi usare JSON.stringify() e poi JSON.parse() quando li recuperi.

const user = { name: 'Alice', age: 30 };
localStorage.setItem('user', JSON.stringify(user));

// Later...
const savedUser = JSON.parse(localStorage.getItem('user'));
console.log(savedUser.name); // Alice

📉 Limite di dimensione

La quantità di dati che puoi salvare è limitata (in genere tra 5MB e 10MB, a seconda del browser). Superare il limite genera un’eccezione.


🧠 Best Practices

  • 🔐 Mai salvare dati sensibili. Usa i cookie sicuri e criptati o lo storage del server.
  • 🧹 Pulisci i dati inutilizzati. Un LocalStorage sovraccarico può rallentare l'applicazione.
  • 🧪 Usa try/catch. Puoi incorrere in errori se l’utente ha il browser in modalità privata o ha disabilitato lo storage.
  • try {
    localStorage.setItem('key', 'value');
  } catch (e) {
    console.warn('Storage failed:', e);
  }

🧭 Conclusione

LocalStorage e SessionStorage sono strumenti semplici ma molto potenti per memorizzare dati client-side. Saperli usare nel modo giusto può migliorare notevolmente l’esperienza utente, ridurre le chiamate al server e velocizzare la tua applicazione.

💡 Regola d’oro: usa localStorage per dati persistenti e sessionStorage per dati temporanei entro la singola sessione o scheda del browser.



Follow me #techelopment

Official site: www.techelopment.it
facebook: Techelopment
instagram: @techelopment
X: techelopment
Bluesky: @techelopment
telegram: @techelopment_channel
whatsapp: Techelopment
youtube: @techelopment