3E e 3I SIA: Esercizio semplice con Local Storage
Ecco un esercizio semplice e completo suddiviso in due pagine HTML:
1. **`index.html`**: Contiene il modulo (form) per inserire i dati e salvarli nel `localStorage`.
2. **`risultato.html`**: Legge i dati memorizzati nel `localStorage` e li mostra a schermo.
### 1. Prima Pagina: `index.html` (Inserimento dati)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esercizio LocalStorage - Form</title>
<style>
body { font-family: Arial, sans-serif; margin: 30px; }
form { max-width: 300px; display: flex; flex-direction: column; gap: 10px; }
input, button { padding: 8px; font-size: 14px; }
button { cursor: pointer; background-color: #007bff; color: white; border: none; border-radius: 4px; }
</style>
</head>
<body>
<h2>Inserisci i tuoi dati</h2>
<form id="mioForm">
<label for="nome">Nome:</label>
<input type="text" id="nome" required>
<label for="cognome">Cognome:</label>
<input type="text" id="cognome" required>
<button type="submit">Salva e Vai alla pagina Risultato</button>
</form>
<script>
document.getElementById('mioForm').addEventListener('submit', function(e) {
e.preventDefault(); // Evita il ricaricamento automatico della pagina
// Recupera i valori inseriti nei campi di testo
const valNome = document.getElementById('nome').value;
const valCognome = document.getElementById('cognome').value;
// Salva i dati nel localStorage del browser
localStorage.setItem('utente_nome', valNome);
localStorage.setItem('utente_cognome', valCognome);
// Reindirizza l'utente alla seconda pagina
window.location.href = 'risultato.html';
});
</script>
</body>
</html>
### 2. Seconda Pagina: `risultato.html` (Visualizzazione dati)
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Esercizio LocalStorage - Risultato</title>
<style>
body { font-family: Arial, sans-serif; margin: 30px; }
.box { border: 1px solid #ccc; padding: 15px; border-radius: 5px; max-width: 300px; background-color: #f9f9f9; }
button { margin-top: 15px; padding: 8px; cursor: pointer; }
</style>
</head>
<body>
<h2>Dati Salvati nel LocalStorage</h2>
<div class="box">
<p><strong>Nome:</strong> <span id="outNome"></span></p>
<p><strong>Cognome:</strong> <span id="outCognome"></span></p>
</div>
<br>
<a href="index.html">Torna al Form</a>
<br><br>
<button onclick="cancellaDati()">Cancella Dati Salvati</button>
<script>
// Recupera i dati salvati tramite le chiavi definite in index.html
const nome = localStorage.getItem('utente_nome');
const cognome = localStorage.getItem('utente_cognome');
// Controlla se esistono e li mostra a video
if (nome && cognome) {
document.getElementById('outNome').textContent = nome;
document.getElementById('outCognome').textContent = cognome;
} else {
document.getElementById('outNome').textContent = "Nessun dato trovato";
document.getElementById('outCognome').textContent = "Nessun dato trovato";
}
// Funzione per ripulire il localStorage
function cancellaDati() {
localStorage.removeItem('utente_nome');
localStorage.removeItem('utente_cognome');
location.reload(); // Ricarica la pagina per aggiornare la vista
}
</script>
</body>
</html>
### Come provarlo:
1. Salva i due file nella stessa cartella nominando il primo `index.html` e il secondo `risultato.html`.
2. Apri `index.html` nel browser, compila i campi e invia il form.
3. Verrai reindirizzato a `risultato.html`, dove verranno letti ed estratti i dati appena memorizzati nel browser.
Questo esercizio serve a capire come far "comunicare" due pagine HTML diverse utilizzando la memoria del browser (`localStorage`). È uno schema fondamentale nello sviluppo web front-end quando vogliamo salvare temporaneamente delle informazioni inserite da un utente (come le preferenze, il nome o lo stato di un form) senza dover utilizzare un database sul server.
Ecco la spiegazione dettagliata passo dopo passo di come funziona il codice diviso nelle due pagine.
### 1. Il concetto chiave: Che cos'è il `localStorage`?
Il `localStorage` è un oggetto messo a disposizione dai browser moderni che permette di memorizzare coppie di **chiave-valore** direttamente sul computer dell'utente.
* I dati salvati rimangono disponibili anche se cambi pagina, se ricarichi il browser o, in alcuni casi, anche se chiudi e riapri il browser.
* Si accede tramite due comandi principali:
* `localStorage.setItem('chiave', 'valore')` per salvare un dato.
* `localStorage.getItem('chiave')` per leggerlo.
### 2. Prima Pagina: `index.html` (La raccolta dei dati)
In questa pagina l'utente compila un modulo (`form`) inserendo il proprio nome e cognome.
* **La struttura HTML:** C'è un tag `<form id="mioForm">` con due campi di input (`<input type="text">`) e un pulsante di invio (`type="submit"`).
* **La gestione in JavaScript:**
1. `document.getElementById('mioForm').addEventListener('submit', ...)`: Mette "in ascolto" il form. Quando l'utente clicca sul pulsante di invio, scatta la funzione JavaScript.
2. `e.preventDefault()`: **Fondamentale!** Di default, quando un form viene inviato, la pagina si ricarica o tenta di inviare i dati a un server esterno. Questo comando blocca il comportamento predefinito, permettendoci di gestire i dati interamente con JavaScript.
3. `const valNome = document.getElementById('nome').value;`: Prende il testo scritto dall'utente dentro la casella del nome.
4. `localStorage.setItem('utente_nome', valNome);`: Prende quel testo e lo memorizza nel browser associandolo alla chiave `'utente_nome'`. Lo stesso viene fatto per il cognome.
5. `window.location.href = 'risultato.html';`: Forza il browser a cambiare pagina, aprendo la seconda pagina (`risultato.html`).
### 3. Seconda Pagina: `risultato.html` (La lettura e visualizzazione)
Questa pagina si apre automaticamente dopo il reindirizzamento e ha il compito di recuperare i dati salvati.
* **La lettura dei dati:**
1. `const nome = localStorage.getItem('utente_nome');`: Va a pescare nella memoria del browser il valore associato alla chiave `'utente_nome'` creata nella pagina precedente.
2. **Il controllo (`if (nome && cognome)`):** Verifica che i dati esistano davvero. Se l'utente prova ad aprire `risultato.html` direttamente senza passare dal form, i valori saranno vuoti (`null`).
3. `document.getElementById('outNome').textContent = nome;`: Prende il testo recuperato dal `localStorage` e lo inserisce dentro un tag HTML (`<span>`) predisposto nella pagina, rendendolo visibile all'utente.
* **La pulizia (`cancellaDati`):**
* La funzione usa `localStorage.removeItem(...)` per cancellare le chiavi salvate e `location.reload()` per aggiornare la pagina, mostrando così come resettare lo stato dell'applicazione.
Commenti
Posta un commento