Classi 3D e 3E SIA: utilizzo del Web Storage per mantenere i valori nelle variabili archiviando i dati localmente all'intero del browses (lato client)
HTML5 Web Storage
Archiviazione web HTML;
meglio dei cookies!
Che cos'è lo spazio 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 delle applicazioni dovevano essere memorizzati nei cookie, inclusi in ogni richiesta del server. Lo storage Web è più sicuro 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 più grande (almeno 5 MB) e le informazioni non vengono mai trasferite al server.
Lo spazio web è per origine (per dominio e protocollo). Tutte le pagine, da un'origine, possono memorizzare e accedere agli stessi dati.
Oggetti di archiviazione Web HTML
La memoria 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 quando la scheda del browser viene chiusa)
L'oggetto localStorage
L'oggetto localStorage memorizza i dati senza data di scadenza. I dati non verranno cancellati quando il browser è chiuso 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");
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname");
Esempio spiegato:
- Creare una coppia nome / valore localStorage con nome = "lastname" e value = "Smith"
- Recupera il valore di "lastname" e inseriscilo nell'elemento con id = "result"
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La sintassi per la rimozione
dell'elemento localStorage "lastname" è la seguente:
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
localStorage.removeItem("lastname");
Nota: le coppie nome / valore sono sempre memorizzate 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).";
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'oggettosessionStorage
è 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 del browser specifica.
Il seguente esempio 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.";
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.";
Commenti
Posta un commento