Gestire i dati lato client in modo efficiente è fondamentale per migliorare l’esperienza utente e ridurre il carico sul server. Tra gli strumenti offerti dalla Web Storage API, localStorage e sessionStorage si distinguono per facilità d’uso e flessibilità. Queste API consentono di salvare dati direttamente nel browser, senza necessità di comunicare continuamente con il backend. In questo articolo vedremo nel dettaglio come funzionano, quali sono le differenze tra di loro e come sfruttarli per migliorare la qualità dei tuoi progetti web.
Indice dei contenuti
- Cosa sono localStorage e sessionStorage
- Differenze tra localStorage e sessionStorage
- Come utilizzare localStorage e sessionStorage
- Quando utilizzare localStorage e sessionStorage
- Esempio completo: Gestione del tema con localStorage
- Errori comuni da evitare
- Conclusioni
Cosa sono localStorage e sessionStorage
localStorage e sessionStorage sono due metodi della Web Storage API che consentono di memorizzare dati lato client, utilizzando il browser come “database” locale. Questa soluzione offre numerosi vantaggi:
- Riduzione delle chiamate al server.
- Miglioramento della velocità di caricamento e dell’esperienza utente.
- Possibilità di salvare preferenze e stato dell’applicazione.
Entrambi salvano dati come coppie chiave-valore (key-value), esclusivamente in formato stringa. Tuttavia, esistono differenze sostanziali nella persistenza dei dati.
Differenze tra localStorage e sessionStorage
localStorage:
- Persistenza a lungo termine: I dati salvati rimangono disponibili anche dopo aver chiuso e riaperto il browser o dopo un semplice refresh della pagina.
- Ideale per: Memorizzare preferenze utente (ad es. tema scuro o chiaro), token di autenticazione, impostazioni di configurazione che devono sopravvivere tra diverse sessioni di navigazione.
sessionStorage:
- Persistenza limitata alla sessione: I dati vengono mantenuti solo finché la finestra o la scheda del browser rimane aperta. Una volta chiusa, i dati sono persi.
- Ideale per: Conservare informazioni temporanee, come il contenuto di un carrello di acquisto non ancora finalizzato, dati di un modulo in fase di compilazione o stato temporaneo dell’interfaccia.
Come utilizzare localStorage e sessionStorage
1. Salvare dati
Utilizzare setItem per salvare una chiave e il suo valore in localStorage o sessionStorage.
// Salvare dati in localStorage
localStorage.setItem('username', 'CyberAlchimista');
// Salvare dati in sessionStorage
sessionStorage.setItem('sessionID', '123456');
2. Recuperare dati
Utilizza getItem per ottenere il valore associato a una determinata chiave.
// Recuperare dati da localStorage
const username = localStorage.getItem('username');
console.log(username); // Output: CyberAlchimista
// Recuperare dati da sessionStorage
const sessionID = sessionStorage.getItem('sessionID');
console.log(sessionID); // Output: 123456
3. Rimuovere dati
removeItem e clear consentono di eliminare singole voci o resettare completamente lo storage.
// Rimuovere un singolo elemento da localStorage
localStorage.removeItem('username');
// Rimuovere tutti gli elementi da sessionStorage
sessionStorage.clear();4. Verificare l’esistenza di un dato
Prima di utilizzare un valore, è buona pratica verificarne l’esistenza.
if (localStorage.getItem('username')) {
console.log('Username esiste!');
} else {
console.log('Nessun username salvato.');
}5. Salvare oggetti complessi
Poiché localStorage e sessionStorage accettano solo stringhe, è necessario serializzare gli oggetti con JSON.stringify prima di salvarli e usare JSON.parse per recuperarli.
// Salvare un oggetto
const user = { name: 'Gioacchino', age: 28 };
localStorage.setItem('user', JSON.stringify(user));
// Recuperare l'oggetto
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // Output: Gioacchino
Quando utilizzare localStorage e sessionStorage
- Usa localStorage per:
- Salvare preferenze utente (tema, lingua, layout).
- Conservare token di autenticazione o chiavi API.
- Implementare funzionalità “Ricorda me” per i login.
- Usa sessionStorage per:
- Gestire dati temporanei relativi a un modulo o uno step di navigazione.
- Memorizzare informazioni che devono scomparire alla chiusura della scheda, come progressi temporanei di un acquisto.
- Dati di un carrello non finalizzato, che non richiedono persistenza a lungo termine.
Esempio Completo: Gestione del tema con localStorage
Nell’esempio seguente, vedremo come salvare e recuperare la preferenza del tema (chiaro o scuro) scelto dall’utente, in modo da mantenerla anche tra diverse sessioni.
HTML
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tema Scuro</title>
<style>
body.light {
background-color: #fff;
color: #000;
}
body.dark {
background-color: #000;
color: #fff;
}
</style>
</head>
<body>
<button id="toggle-theme">Cambia Tema</button>
<script src="script.js"></script>
</body>
</html>JavaScript (script.js)
// Verifica se un tema è già stato salvato, altrimenti usa 'light'
const currentTheme = localStorage.getItem('theme') || 'light';
document.body.classList.add(currentTheme);
// Gestisci il click sul pulsante per cambiare tema
document.getElementById('toggle-theme').addEventListener('click', () => {
const newTheme = document.body.classList.contains('light') ? 'dark' : 'light';
document.body.classList.remove('light', 'dark');
document.body.classList.add(newTheme);
// Salva il nuovo tema in localStorage
localStorage.setItem('theme', newTheme);
});In questo modo, l’utente ritroverà il tema scelto anche chiudendo e riaprendo il browser, garantendo un’esperienza più personalizzata.
Errori Comuni da Evitare
- Non controllare lo spazio disponibile:
Ogni browser ha dei limiti (solitamente intorno ai 5MB). Evita di salvare dati troppo pesanti per non superare le capacità di storage. - Non salvare dati sensibili in localStorage:
I dati in localStorage e sessionStorage non sono crittografati nativamente e sono accessibili da qualsiasi script che gira nella stessa origine. Evita di memorizzare password, informazioni finanziarie o dati altamente sensibili. - Dimenticare di rimuovere i dati non più necessari:
Una corretta gestione prevede anche la pulizia periodica dei dati non utilizzati per evitare accumuli e possibile disordine nel tuo storage.
Conclusioni
L’utilizzo di localStorage e sessionStorage in JavaScript offre una soluzione semplice ma efficace per migliorare l’esperienza utente, rendendo l’interfaccia più reattiva e personalizzata. Integrarli con le migliori pratiche di sicurezza e pulizia ti consentirà di costruire applicazioni web più veloci, affidabili e user-friendly.
Inizia oggi stesso a sperimentare con queste API e scopri come possono rendere i tuoi progetti web ancora più fluidi e ottimizzati!
Hai trovato utile questo Articolo? Continua a seguire Cyberalchimista sui social (@cyberalchimista) per altri tutorial e consigli sullo sviluppo web! Se hai domande o vuoi condividere i tuoi progetti contattaci.
