API di archiviazione Web HTML
Archiviazione Web HTML; meglio dei biscotti.
Che cos'è l'archiviazione Web HTML?
Con l'archiviazione Web, le applicazioni Web possono archiviare i dati localmente all'interno del browser dell'utente.
Prima di HTML5, i dati dell'applicazione dovevano essere archiviati nei cookie, inclusi in ogni richiesta del server. L'archiviazione Web è più sicura e grandi quantità di dati possono essere archiviate localmente, senza influire sulle prestazioni del sito Web.
A differenza dei cookie, il limite di archiviazione è molto maggiore (almeno 5 MB) e le informazioni non vengono mai trasferite al server.
L'archiviazione Web è per origine (per dominio e protocollo). Tutte le pagine, da un'origine, possono memorizzare e accedere agli stessi dati.
Supporto browser
I numeri nella tabella specificano la prima versione del browser che supporta completamente Web Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
Oggetti di archiviazione Web HTML
L'archiviazione Web HTML fornisce due oggetti per la memorizzazione dei dati sul client:
window.localStorage- memorizza i dati senza data di scadenzawindow.sessionStorage- memorizza i dati per una sessione (i dati vengono persi alla chiusura della scheda del browser)
Prima di utilizzare l'archiviazione Web, verificare il supporto del browser per localStorage e sessionStorage:
if (typeof(Storage) !== "undefined") {
// Code for localStorage/sessionStorage.
}
else {
// Sorry! No Web Storage support..
}
L'oggetto localStorage
L'oggetto localStorage archivia i dati senza data di scadenza. I dati non verranno cancellati alla chiusura del browser e saranno disponibili il giorno, la settimana o l'anno successivo.
Esempio
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Esempio spiegato:
- Crea una coppia nome/valore localStorage con name="lastname" e value="Smith"
- Recupera il valore di "lastname" e inseriscilo nell'elemento con id="result"
L'esempio sopra potrebbe anche essere scritto in questo modo:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La sintassi per rimuovere l'elemento localStorage "cognome" è la seguente:
localStorage.removeItem("lastname");
Nota: le coppie nome/valore vengono sempre archiviate come stringhe. Ricordati di convertirli in un altro formato quando necessario!
L'esempio seguente conta il numero di volte in cui un utente ha fatto clic su un pulsante. In questo codice la stringa del valore viene convertita in un numero per poter aumentare il contatore:
Esempio
if (localStorage.clickcount) {
localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
localStorage.clickcount + " time(s).";
L'oggetto sessionStorage
L' sessionStorageoggetto è uguale all'oggetto localStorage, tranne per il
fatto che memorizza i dati per una sola sessione. I dati vengono cancellati quando l'utente chiude la scheda specifica del browser.
L'esempio seguente conta il numero di volte in cui un utente ha fatto clic su un pulsante, nella sessione corrente:
Esempio
if (sessionStorage.clickcount) {
sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
}
else {
sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "You have clicked the button " +
sessionStorage.clickcount + " time(s) in this session.";