8 LocalStorage e persistenza dei dati
Obiettivi didattici:
-
Introdurre le API localStorage e sessionStorage per 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:
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 body cambia e il nuovo tema viene salvato in localStorage.
-
Alla visita successiva, lo script legge il tema salvato e lo applica automaticamente.
4. Approfondimenti
let settings = { theme: 'dark', fontSize: '16px' };
localStorage.setItem('settings', JSON.stringify(settings));
let loadedSettings = JSON.parse(localStorage.getItem('settings'));
console.log(loadedSettings.theme); // "dark"
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 light e dark.
-
Leggere da localStorage il tema salvato e applicarlo al body.
-
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 localStorage e sessionStorage?
Risposta: localStorage dura finché l’utente non cancella; sessionStorage dura solo fino a chiusura del tab.
-
Come si legge un dato da localStorage?
Risposta: localStorage.getItem('chiave')
-
Come salvare un oggetto complesso?
Risposta: Serializzare con JSON.stringify(obj) e leggere con JSON.parse(...)
-
Perché localStorage è utile per dark mode?
Risposta: Permette di ricordare la scelta dell’utente tra visite senza server.
Commenti
Posta un commento