4.1 localStorage e sessionStorage
Web storage consente alle web app di salvare dati nel browser dell'utente. È utile per memorizzare informazioni che devono persistere tra visite o navigare tra le pagine. In HTML5 sono stati introdotti due tipi principali di web storage: localStorage e sessionStorage.
Cos'è localStorage?
localStorage è un archivio di dati che persiste nel browser dell'utente per un tempo indefinito. I dati in localStorage restano disponibili anche dopo la chiusura del browser e il riavvio del computer. È utile per memorizzare informazioni che devono persistere tra le sessioni, come impostazioni utente o dati del carrello.
Cos'è sessionStorage?
sessionStorage è un archivio di dati che persiste nel browser dell'utente solo per una sessione. I dati in sessionStorage sono disponibili solo finché la scheda o la finestra del browser è aperta. È utile per memorizzare dati che servono solo durante una sessione, come dati temporanei dei moduli o stati dell'applicazione.
Metodi e proprietà principali
Metodi e proprietà di localStorage e sessionStorage
Entrambi i tipi di web storage hanno la stessa API, che include metodi e proprietà per lavorare con i dati:
setItem(key, value): salva un valore con una chiave specificata.getItem(key): restituisce il valore memorizzato sotto la chiave specificata.removeItem(key): elimina il valore con la chiave specificata.clear(): pulisce tutti i dati nell'archivio.key(index): restituisce la chiave in base all'indice.length: restituisce il numero di coppie chiave-valore nell'archivio.
4.2 Esempi di utilizzo
Esempio di utilizzo di localStorage:
<!DOCTYPE html>
<html>
<head>
<title>localStorage Example</title>
</head>
<body>
<h1>localStorage Example</h1>
<input type="text" id="username" placeholder="Enter your username">
<button id="saveButton">Save</button>
<button id="loadButton">Load</button>
<script>
const saveButton = document.getElementById('saveButton');
const loadButton = document.getElementById('loadButton');
const usernameInput = document.getElementById('username');
// Salvataggio del valore in localStorage
saveButton.addEventListener('click', function() {
const username = usernameInput.value;
localStorage.setItem('username', username);
alert('Username salvato!');
});
// Caricamento del valore da localStorage
loadButton.addEventListener('click', function() {
const savedUsername = localStorage.getItem('username');
if (savedUsername) {
usernameInput.value = savedUsername;
alert('Username caricato!\n' + `${savedUsername}`);
} else {
alert('Nessun username trovato.');
}
});
</script>
</body>
</html>
Esempio di utilizzo di sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>sessionStorage Example</title>
</head>
<body>
<h1>sessionStorage Example</h1>
<input type="text" id="sessionData" placeholder="Enter some data">
<button id="saveSessionButton">Save</button>
<button id="loadSessionButton">Load</button>
<script>
const saveSessionButton = document.getElementById('saveSessionButton');
const loadSessionButton = document.getElementById('loadSessionButton');
const sessionDataInput = document.getElementById('sessionData');
// Salvataggio del valore in sessionStorage
saveSessionButton.addEventListener('click', function() {
const data = sessionDataInput.value;
sessionStorage.setItem('data', data);
alert('Dati salvati nella sessione!');
});
// Caricamento del valore da sessionStorage
loadSessionButton.addEventListener('click', function() {
const savedData = sessionStorage.getItem('data');
if (savedData) {
sessionDataInput.value = savedData;
alert('Dati caricati dalla sessione!\n' + `${savedData}`);
} else {
alert('Nessun dato trovato nella sessione.');
}
});
</script>
</body>
</html>
4.3 Confronto tra localStorage e sessionStorage
Differenze tra localStorage e sessionStorage
-
Durata di memorizzazione:
- localStorage salva i dati per un tempo indefinito, finché l'utente o uno script non li elimina esplicitamente.
- sessionStorage salva i dati solo per il tempo della sessione corrente (scheda o finestra del browser).
-
Ambito di visibilità:
- I dati in localStorage sono accessibili in tutte le schede e finestre dello stesso dominio.
- I dati in sessionStorage sono accessibili solo nella scheda o nella finestra corrente.
-
Dimensione dell'archivio:
- Generalmente localStorage e sessionStorage hanno un limite di 5-10 MB per dominio, a seconda del browser.
Esempio di confronto tra localStorage e sessionStorage:
<!DOCTYPE html>
<html>
<head>
<title>Comparison Example</title>
</head>
<body>
<script>
// Utilizzo di localStorage
localStorage.setItem('persistentData', 'Questo dato persiste tra le sessioni');
console.log(localStorage.getItem('persistentData')); // "Questo dato persiste tra le sessioni"
// Utilizzo di sessionStorage
sessionStorage.setItem('temporaryData', 'Questo dato persiste solo durante la sessione');
console.log(sessionStorage.getItem('temporaryData')); // "Questo dato persiste solo durante la sessione"
</script>
</body>
</html>
4.4 Ambiti di applicazione
Quando utilizzare localStorage:
- Memorizzare dati che devono persistere tra le sessioni, come impostazioni o preferenze utente
- Memorizzare dati che devono essere accessibili in tutte le schede e finestre di un dominio
- Memorizzare dati che raramente cambiano
Quando utilizzare sessionStorage:
- Memorizzare dati temporanei che servono solo durante la sessione corrente
- Memorizzare dati specifici per la scheda o finestra del browser corrente
- Memorizzare dati che devono essere eliminati alla chiusura della scheda o finestra
Sicurezza e privacy
Quando si utilizzano web storage, è importante considerare la sicurezza e la privacy:
- Crittografia: i dati nei web storage non sono crittografati per impostazione predefinita. Se è necessario archiviare informazioni riservate, è consigliabile crittografare i dati prima di salvarli.
- Attacchi cross-domain: i web storage funzionano all'interno di un singolo dominio, impedendo l'accesso ai dati da altri domini. Tuttavia, è importante proteggersi dagli attacchi XSS (Cross-Site Scripting) affinché gli aggressori non possano accedere ai dati nello storage.
- Limitazione della quantità di dati: cerca di archiviare solo le informazioni necessarie e pulisci regolarmente i dati obsoleti per evitare il sovraccarico dello storage.
GO TO FULL VERSION