Archiviazione locale HTML

Archiviazione locale HTML: migliore dei cookie.

Cos'è l'archiviazione locale HTML?

Grazie allo storage locale (Local Storage), le applicazioni web possono archiviare dati localmente nel browser dell'utente.

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

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

Il salvataggio locale avviene attraverso l'origine (origin) (attraverso dominio e protocollo). Tutte le pagine, dall'origine, possono salvare e accedere ai dati stessi.

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 dati per una sessione (i dati vengono persi quando si chiude la scheda del browser)

Quando si utilizza la memorizzazione locale, verificare la compatibilità del browser con localStorage e sessionStorage:

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

Oggetto localStorage

L'oggetto localStorage memorizza dati senza scadenza. Quando il browser viene chiuso, i dati non vengono eliminati 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 direttamente

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 scritto anche così:

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

Ecco la sintassi per eliminare l'elemento localStorage "lastname":

localStorage.removeItem("lastname");

Nota: gli elementi nome/valore sono sempre memorizzati 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. Nella codice, la stringa di valore viene convertita in un numero e il conteggio viene incrementato di conseguenza:

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 direttamente

Oggetto sessionStorage

L'oggetto sessionStorage è equivalente all'oggetto localStorage, ma differisce nel fatto 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 dell'utente sul pulsante 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 direttamente