JavaScript LocalStorage, SessionStorage
Impara a usare localStorage e sessionStorage in JavaScript: salva e leggi dati, gestisci oggetti con JSON, ascolta l'evento storage e scegli tra i due.
localStorage e sessionStorage sono i due oggetti che compongono la Web Storage API — il modo più semplice per mantenere dati nel browser tra i ricaricamenti della pagina. Entrambi memorizzano informazioni come coppie chiave/valore di tipo string associate all'origine della pagina (protocollo + host + porta), ed entrambi espongono esattamente gli stessi metodi. L'unica differenza è quanto a lungo i dati rimangono: localStorage li conserva indefinitamente, mentre sessionStorage li elimina quando la scheda viene chiusa.
Questa pagina illustra l'intera API, come salvare oggetti in modo sicuro con JSON, come reagire alle modifiche in altre schede tramite l'evento storage, come gestire gli errori che queste API possono generare e quando conviene ricorrere a uno store più potente.
Non memorizzare mai informazioni sensibili (password, token, dati personali) in localStorage o sessionStorage. Qualsiasi JavaScript in esecuzione sulla pagina — compresi gli script di terze parti — può leggerle, e sono completamente esposte agli attacchi di cross-site scripting (XSS).
Capire LocalStorage in JavaScript
localStorage memorizza i dati nel browser dell'utente in modo persistente, senza data di scadenza. I dati sopravvivono alla chiusura della scheda, alla chiusura del browser e persino al riavvio del computer — rimangono finché il codice (o l'utente) non li elimina. I dati sono limitati all'origine, quindi https://example.com non può leggere ciò che ha memorizzato https://other.com.
Come Usare LocalStorage
L'API è semplice. Si scrive una coppia con setItem(key, value), la si rilegge con getItem(key) e la si elimina con removeItem(key). La lettura di una chiave inesistente restituisce null (non undefined). L'API fornisce anche:
clear()— rimuove tutti gli elementi per questa origine.key(index)— ottiene il nome della chiave a un dato indice.length— il numero di elementi memorizzati.- un evento
storagea cui è possibile ascoltare per rilevare le modifiche effettuate in altre schede.
Le operazioni di storage sono sincrone e vengono eseguite sul thread principale, quindi leggere o scrivere grandi quantità di dati può bloccare il rendering dell'interfaccia utente. Per dati più grandi o strutturati, preferire IndexedDB.
Memorizzare Object e Array con JSON
L'errore più comune con Web Storage è dimenticare che tutto viene memorizzato come string. Se si passa un object a setItem, viene silenziosamente convertito con toString(), restituendo il valore inutile "[object Object]". La soluzione è serializzare con JSON.stringify in scrittura e JSON.parse in lettura.
Per saperne di più sulla conversione di valori da e verso string, consulta Lavorare con JSON.
Iterare sugli Elementi Memorizzati
Usa length insieme a key(index) per scorrere tutto ciò che è in storage, oppure leggi le chiavi con Object.keys:
Applicazione Pratica: Creare un Tema Switcher con LocalStorage
Considera uno scenario in cui vuoi salvare il tema preferito dall'utente (chiaro o scuro) in modo che persista tra le sessioni. L'esempio seguente combina HTML, CSS e JavaScript in un unico blocco per semplicità.
<style>
:root {
--bg-color: #ffffff;
--text-color: #000000;
}
.dark {
--bg-color: #333333;
--text-color: #ffffff;
}
body {
background-color: var(--bg-color);
color: var(--text-color);
transition: background-color 0.5s, color 0.5s;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
<body>
<button onclick="toggleTheme()">Toggle Theme</button>
<script>
function setTheme(themeName) {
localStorage.setItem('theme', themeName);
document.documentElement.className = themeName;
}
function toggleTheme() {
var currentTheme = localStorage.getItem('theme') === 'dark' ? 'dark' : 'light';
if (currentTheme === 'light') {
setTheme('dark');
} else {
setTheme('light');
}
}
function loadTheme() {
var theme = localStorage.getItem('theme') || 'light';
setTheme(theme);
}
// Initial theme load
loadTheme();
</script>
</body>Questo script verifica la presenza di un tema salvato in LocalStorage o imposta il valore predefinito 'light'. Applica quindi il tema impostando il nome della classe dell'elemento HTML radice, consentendo al CSS di regolare gli stili di conseguenza.
SessionStorage: Archiviazione Temporanea dei Dati in JavaScript
Mentre LocalStorage è progettato per memorizzare dati senza scadenza, SessionStorage offre un modo per archiviare dati per la durata della sessione di pagina. I dati memorizzati in SessionStorage vengono cancellati al termine della sessione di pagina — ovvero quando la scheda o la finestra viene chiusa.
Come Usare SessionStorage
Di seguito è riportato un esempio di base sull'uso di SessionStorage. I metodi e la sintassi sono identici a quelli di localStorage — cambia solo la durata. Un valore di sessionStorage è anche isolato per scheda: aprire lo stesso sito in una nuova scheda inizia con un sessionStorage vuoto, mentre una nuova scheda condivide lo stesso localStorage.
Esempio: Usare SessionStorage per il Salvataggio Automatico dei Dati di un Form
Immagina di avere un form che un utente potrebbe compilare, ma c'è il rischio che chiuda accidentalmente il browser. Puoi usare SessionStorage per salvare temporaneamente i dati del form.
<body>
<div>Start writing an email address in the following input. Refresh the page in the middle of your typing, and you'll see that the page remembers what you entered before.</div>
<br />
<input type="email" id="email"/>
</body>
<script>
window.onload = function() {
const email = sessionStorage.getItem('email');
if (email) {
alert('email found from session storage: ' + email);
document.getElementById('email').value = email;
}
document.getElementById('email').oninput = function() {
sessionStorage.setItem('email', this.value);
};
};
</script>Questo codice carica automaticamente qualsiasi indirizzo email salvato al caricamento della pagina e aggiorna l'elemento SessionStorage ogni volta che il campo email cambia. Per testarlo, clicca sul pulsante "prova tu stesso", scrivi qualcosa nell'input e poi aggiorna la pagina. Il valore rimarrà presente dopo l'aggiornamento.
Considera sempre i limiti di dimensione prima di memorizzare dati (tipicamente circa 5 MB sia per LocalStorage che per SessionStorage).
LocalStorage vs. SessionStorage
Entrambi gli oggetti condividono la stessa API, lo stesso scope per origine e lo stesso modello di archiviazione solo-string. Le differenze pratiche riguardano la durata e la visibilità:
| Caratteristica | localStorage | sessionStorage |
|---|---|---|
| Durata | Fino alla cancellazione esplicita | Fino alla chiusura della scheda |
| Sopravvive al riavvio scheda/browser | Sì | No |
| Condiviso tra schede della stessa origine | Sì | No (ogni scheda è isolata) |
| Capacità | ~5 MB | ~5 MB |
Genera l'evento storage nelle altre schede | Sì | No |
Usa sessionStorage quando i dati sono significativi solo per la visita corrente — una procedura guidata a più passaggi, un form in compilazione, una posizione di scorrimento. Usa localStorage per le preferenze e altri dati che devono persistere tra le visite.
Reagire alle Modifiche con l'Evento storage
Quando localStorage cambia in una scheda, il browser genera un evento storage in tutte le altre schede della stessa origine (ma non nella scheda che ha effettuato la modifica). Questo è il metodo standard per mantenere più schede sincronizzate — ad esempio, effettuare il logout dell'utente ovunque quando si disconnette da una scheda.
window.addEventListener('storage', (event) => {
console.log('Key changed:', event.key);
console.log('Old value:', event.oldValue);
console.log('New value:', event.newValue);
console.log('URL of the page that made the change:', event.url);
});
// In another tab, this would trigger the handler above:
// localStorage.setItem('theme', 'dark');Le proprietà key, oldValue e newValue dell'oggetto evento indicano esattamente cosa è cambiato. Si noti che sessionStorage non genera questo evento nelle altre schede, poiché i suoi dati non vengono mai condivisi.
Gestire Errori e Casi Limite
Le chiamate di storage possono generare eccezioni, quindi il codice in produzione non deve dare per scontato che abbiano sempre successo:
- Quota superata. Scrivere oltre il limite di circa 5 MB genera un
QuotaExceededError. Racchiudi le scritture in un bloccotry...catchse il valore potrebbe essere grande. - Modalità disabilitata o privata. Alcuni browser (o impostazioni di privacy restrittive) rendono lo storage non disponibile, e persino accedere a
localStoragepuò generare unSecurityError. Esegui il rilevamento delle funzionalità prima di affidarti ad esso.
Per dataset più grandi, query complesse o archiviazione di dati binari, un database lato client più potente come IndexedDB è la scelta migliore. Se hai bisogno che i dati vengano inviati automaticamente con ogni richiesta al server, usa invece i cookie. Puoi anche verificare la capacità rimanente e richiedere la persistenza con la Storage API.
Conclusione
LocalStorage e SessionStorage offrono potenti opzioni per migliorare l'esperienza utente gestendo in modo efficiente i dati nelle applicazioni web. Comprendendo le loro capacità e limitazioni, gli sviluppatori possono prendere decisioni informate su come utilizzare al meglio questi strumenti nei propri progetti.