8 LocalStorage e persistenza dei dati
Obiettivi didattici:
-
Introdurre le API
localStorageesessionStorageper salvare dati lato client. -
Mostrare come mantenere preferenze dell’utente, come il tema dark/light, tra diverse visite al sito.
-
Svolgere un esempio pratico di dark mode persistente.
1. Introduzione a localStorage e sessionStorage
JavaScript fornisce due principali sistemi di storage locale nel browser:
| API | Durata dati | Scope | Uso tipico |
|---|---|---|---|
localStorage |
permanente (finché l’utente non cancella) | stesso dominio | preferenze utente, dati persistenti |
sessionStorage |
durata sessione (chiusura tab) | stesso tab | dati temporanei, sessione utente |
Proprietà principali:
-
Si lavora sempre con coppie chiave/valore (
key/value) in formato stringa. -
Metodi principali:
localStorage.setItem('chiave', 'valore'); // salva un dato
localStorage.getItem('chiave'); // legge un dato
localStorage.removeItem('chiave'); // elimina un dato
localStorage.clear(); // cancella tutto
Per sessionStorage si usa la stessa sintassi.
2. Salvare dati dell’utente
Esempio: memorizzare la preferenza tema (light/dark) del visitatore.
Logica:
-
L’utente seleziona il tema.
-
Lo script salva la scelta in
localStorage. -
Alla visita successiva, lo script legge il valore e applica il tema automaticamente.
3. Esempio pratico: Dark Mode persistente
HTML base:
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Mode Persistente</title>
<style>
body.light { background-color: white; color: black; }
body.dark { background-color: #121212; color: white; }
button { margin: 20px; padding: 10px; }
</style>
</head>
<body>
<h1>Dark Mode Persistente</h1>
<button id="toggleTheme">Cambia Tema</button>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js):
// Recupera il tema salvato, se esiste
let savedTheme = localStorage.getItem('theme') || 'light';
document.body.className = savedTheme;
// Funzione per cambiare tema
function toggleTheme() {
if(document.body.className === 'light') {
document.body.className = 'dark';
localStorage.setItem('theme', 'dark');
} else {
document.body.className = 'light';
localStorage.setItem('theme', 'light');
}
}
// Event listener sul pulsante
document.getElementById('toggleTheme').addEventListener('click', toggleTheme);
Cosa succede:
-
Alla prima visita il tema di default è light.
-
L’utente clicca su “Cambia Tema”, la classe del
bodycambia e il nuovo tema viene salvato inlocalStorage. -
Alla visita successiva, lo script legge il tema salvato e lo applica automaticamente.
4. Approfondimenti
-
localStoragesalva solo stringhe. Per oggetti complessi si può usare JSON:
let settings = { theme: 'dark', fontSize: '16px' };
localStorage.setItem('settings', JSON.stringify(settings));
let loadedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(loadedSettings.theme); // "dark"
-
Differenza con
cookies:localStorageè più semplice e non viene inviato al server ad ogni richiesta.
5. Esercizio guidato
Obiettivo: creare un sito con scelta del tema che rimane salvata tra le visite.
Passaggi:
-
Creare HTML con pulsante toggle.
-
Definire due classi CSS
lightedark. -
Leggere da
localStorageil tema salvato e applicarlo albody. -
Al click sul pulsante, cambiare tema e salvare la nuova scelta.
Suggerimento avanzato: aggiungere anche la dimensione del font e salvare entrambi i dati in un oggetto JSON nel localStorage.
6. Test rapido
-
Differenza tra
localStorageesessionStorage?
Risposta:localStoragedura finché l’utente non cancella;sessionStoragedura solo fino a chiusura del tab. -
Come si legge un dato da
localStorage?
Risposta:localStorage.getItem('chiave') -
Come salvare un oggetto complesso?
Risposta: Serializzare conJSON.stringify(obj)e leggere conJSON.parse(...) -
Perché
localStorageè utile per dark mode?
Risposta: Permette di ricordare la scelta dell’utente tra visite senza server.
Nessun commento:
Posta un commento