Storage locale HTML, meglio di cookies .
Cosa è l'HTML Archiviazione locale?
Con l'archiviazione locale, le applicazioni web in grado di memorizzare i dati localmente all'interno del browser dell'utente.
Prima di HTML5, i dati delle applicazioni dovevano essere memorizzati in cookies , inclusi in ogni richiesta del server. storage locale è più sicuro, e grandi quantità di dati possono essere memorizzati in locale, senza influire sulle prestazioni sito web.
A differenza di cookies , il limite di archiviazione è molto più grande (at least 5MB) e le informazioni non è mai trasferita al server.
Storage locale è per origine (per domain and protocol) . Tutte le pagine, da un'unica origine, possono archiviare e accedere agli stessi dati.
archiviazione locale e la sessione
archiviazione Web offre due diverse aree-locale e di stoccaggio sessione di storage che si differenziano per la portata e la durata.
I dati immessi nella memoria locale è per origine (la combinazione di protocollo, host, e numero di porta, come definito nella politica stessa origine) (i dati sono disponibili per tutti gli script caricati dalla pagine aventi la stessa origine che precedentemente memorizzati i dati) e persiste dopo la chiusura del browser.
memorizzazione delle sessioni è per origine-per-window-o-scheda ed è limitata alla durata della finestra. memorizzazione delle sessioni è destinato a permettere istanze separate della stessa applicazione Web per l'esecuzione in diverse finestre senza interferire con l'altro, un caso d'uso che non è ben supportato da cookie.
Supporto browser
I numeri nella tabella indicano la prima versione del browser che supporta pienamente Local Storage.
| API | |||||
|---|---|---|---|---|---|
| Web Storage | 4.0 | 8.0 | 3.5 | 4.0 | 11.5 |
HTML Local Storage Objects
storage locale HTML fornisce due oggetti per la memorizzazione dei dati sul client:
- window.localStorage - memorizza i dati con una data di scadenza
- window.sessionStorage - memorizza i dati per una sessione (i dati vengono persi quando la scheda del browser viene chiuso)
Prima di utilizzare l'archiviazione locale, 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 memorizza i dati con una data di scadenza. I dati non saranno cancellati quando il browser viene chiuso, e saranno disponibili il giorno successivo, alla settimana o all'anno.
Esempio
// Store
localStorage.setItem("lastname", "Smith");
// Retrieve
document.getElementById("result").innerHTML = localStorage.getItem("lastname"); Prova tu stesso " Esempio spiegato:
- Creare un localStorage / coppia di valori nome con il name="lastname" e value="Smith"
- Recuperare il valore di "lastname" e inserirlo nel elemento con id = "risultato"
L'esempio di cui sopra potrebbe anche essere scritto in questo modo:
// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La sintassi per la rimozione del "lastname" voce localStorage è la seguente:
localStorage.removeItem("lastname");
Nota: coppie nome / valore sono sempre memorizzati come stringhe. Ricordarsi di convertirli in un altro formato, se necessario!
L'esempio seguente conta il numero di volte che un utente ha fatto clic su un pulsante. In questo codice la stringa valore viene convertito in un numero di 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)."; Prova tu stesso " Il sessionStorage Object
Il sessionStorage oggetto è uguale al localStorage oggetto, salvo 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 che 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."; Prova tu stesso "