3E, 3I, 4E, 4I Sia: L'uso del "LocalStorage" Inviare dati da un modulo html senza l'uso del Php
Il localStorage è una funzionalità fornita da JavaScript che consente di archiviare dati sul lato client del browser per utilizzarli in seguito. Questi dati vengono memorizzati localmente sul dispositivo dell'utente e possono essere recuperati e modificati facilmente tramite JavaScript.
Ecco come funziona il localStorage in HTML e JavaScript:
1. **Persistenza dei dati**: Il localStorage conserva i dati anche dopo che la pagina web è stata aggiornata o chiusa. Questo significa che i dati rimarranno memorizzati fino a quando non vengono esplicitamente rimossi o sovrascritti.
2. **Semplice API**: Utilizzare il localStorage è abbastanza semplice grazie all'API fornita da JavaScript. Puoi salvare dati sotto forma di coppie chiave-valore (simile a un dizionario) e recuperarli in modo rapido.
3. **Utilizzo**: È possibile utilizzare il localStorage per salvare informazioni come le preferenze dell'utente, lo stato dell'applicazione, i dati del modulo, i token di accesso e altro ancora.
Ecco un esempio di come salvare un valore nel localStorage:
```javascript
// Salvare un valore nel localStorage
localStorage.setItem('chiave', 'valore');
```
Per recuperare un valore precedentemente salvato:
```javascript
// Recuperare un valore dal localStorage
const valore = localStorage.getItem('chiave');
```
4. **Vincoli di sicurezza**: È importante tenere presente che il localStorage è limitato alla dimensione massima di archiviazione consentita dal browser per ogni sito web. Inoltre, i dati memorizzati nel localStorage sono accessibili da JavaScript sullo stesso dominio, il che significa che deve esserci una certa fiducia nel codice che accede e manipola questi dati.
In sintesi, il localStorage è uno strumento potente che permette di memorizzare dati sul lato client del browser per un accesso rapido e persistente. È ampiamente utilizzato per semplificare lo sviluppo di applicazioni web e per migliorare l'esperienza dell'utente conservando informazioni importanti tra le sessioni.
Esempio:
Pagina prenotazione.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modulo Prenotazioni</title>
</head>
<body>
<form id="bookingForm" onsubmit="return saveData()">
<label for="name">Nome:</label><br>
<input type="text" id="name" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="email" id="email" name="email"><br><br>
<label for="date">Data:</label><br>
<input type="date" id="date" name="date"><br><br>
<button type="submit">Prenota</button>
</form>
<script>
function saveData() {
const name = document.getElementById('name').value;
const email = document.getElementById('email').value;
const date = document.getElementById('date').value;
// Salva i dati nel localStorage per passarli alla prossima pagina
localStorage.setItem('name', name);
localStorage.setItem('email', email);
localStorage.setItem('date', date);
// Reindirizza alla nuova pagina per visualizzare i dati
window.location.href = 'visualizzaDati.html';
return false; // Per evitare il submit standard del form
}
</script>
</body>
</html>
-----------------------------------------------------
Pagina visualizzaDati.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Visualizza Dati Prenotazione</title>
</head>
<body>
<h1>Dettagli Prenotazione</h1>
<ul>
<li><strong>Nome:</strong> <span id="name"></span></li>
<li><strong>Email:</strong> <span id="email"></span></li>
<li><strong>Data:</strong> <span id="date"></span></li>
</ul>
<script>
// Recupera i dati salvati nel localStorage
const name = localStorage.getItem('name');
const email = localStorage.getItem('email');
const date = localStorage.getItem('date');
// Mostra i dati nella pagina HTML
document.getElementById('name').innerText = name;
document.getElementById('email').innerText = email;
document.getElementById('date').innerText = date;
</script>
</body>
</html>
Buon lavoro!
Commenti
Posta un commento