Memorizzazione locale HTML

Memorizzazione locale HTML: migliore dei cookie.

Cos'è la memorizzazione locale HTML?

Grazie alla memorizzazione locale (Local Storage), le applicazioni web possono memorizzare i dati localmente nel browser dell'utente.

Prima dell'HTML5, i dati delle applicazioni potevano essere memorizzati solo nei cookie, inclusi ogni richiesta del server. La memorizzazione locale è più sicura e può memorizzare grandi quantità di dati localmente senza influenzare le prestazioni del sito.

A differenza dei cookie, i limiti di memorizzazione sono molto più grandi (almeno 5MB), e le informazioni non vengono trasmesse al server.

La memorizzazione locale tramite origine (origin) (attraverso dominio e protocollo). Tutte le pagine, dall'origine, possono memorizzare e accedere ai dati identici.

Supporto del browser

L'array nella tabella indica la versione del browser che supporta completamente la memorizzazione locale.

API
Web Storage 4.0 8.0 3.5 4.0 11.5

Oggetto HTML Local Storage

HTML Local Storage fornisce due oggetti per memorizzare dati sul client:

  • window.localStorage - memorizza dati senza scadenza
  • window.sessionStorage - memorizza i dati per una sessione (i dati vengono persi quando si chiude la scheda del browser)

Quando si utilizza la memorizzazione locale, verificare la supporto del browser per localStorage e sessionStorage:

if (typeof(Storage) !== "undefined") {
    // Codice per localStorage/sessionStorage
} else {
    // Scusate! Non supporta Web Storage ..
}

Oggetto localStorage

L'oggetto localStorage memorizza dati senza scadenza. I dati non vengono eliminati quando il browser viene chiuso e sono disponibili il giorno successivo, la settimana o l'anno.

Esempio

// Salva
localStorage.setItem("lastname", "Gates");
// Recupera
document.getElementById("result").innerHTML = localStorage.getItem("lastname");

Prova tu stesso

Esempio di spiegazione:

  • Crea un nome/valore pair di localStorage, dove: name="lastname", value="Gates"
  • Recupera il valore di "lastname" e inseriscilo nell'elemento con id="result"

L'esempio precedente può essere anche così scritto:

// Salva
localStorage.lastname = "Gates";
// Recupera
document.getElementById("result").innerHTML = localStorage.lastname;

La sintassi per eliminare l'elemento localStorage "lastname" è la seguente:

localStorage.removeItem("lastname");

Nota: gli elementi nome/valore sono sempre salvati come stringhe. Se necessario, ricorda di convertirli in altri formati!

Esempio: questo esempio conta il numero di volte che l'utente clicca su un pulsante. La stringa di valore viene convertita in un numero e incrementa il conteggio in successione nel codice:

Esempio

if (localStorage.clickcount) {
    localStorage.clickcount = Number(localStorage.clickcount) + 1;
} else {
    localStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "Hai cliccato su questo pulsante " +
localStorage.clickcount + " volte.";

Prova tu stesso

Oggetto sessionStorage

L'oggetto sessionStorage è equivalente all'oggetto localStorage, la differenza è che memorizza i dati solo per una sessione. Se l'utente chiude una scheda specifica del browser, i dati vengono cancellati.

Esempio che conta i clic del pulsante dell'utente nella sessione corrente:

Esempio

if (sessionStorage.clickcount) {
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1;
} else {
    sessionStorage.clickcount = 1;
}
document.getElementById("result").innerHTML = "In questa sessione, hai cliccato su questo pulsante " +
sessionStorage.clickcount + " volte.";

Prova tu stesso