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 scadenza
  • window.sessionStorage - memorizza i dati per una sessione (i dati vengono persi quando la scheda del browser viene chiusa)
Prima di utilizzare la memoria Web, controllare il supporto del browser per localStorage e sessionStorage:

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");



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"
L'esempio sopra potrebbe anche essere scritto in questo modo:

// Store
localStorage.lastname = "Smith";
// Retrieve
document.getElementById("result").innerHTML = localStorage.lastname;
La sintassi per la rimozione dell'elemento localStorage "lastname" è la seguente:

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).";






L'oggetto sessionStorage

L'oggetto sessionStorage è 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.";
 

clicca qui e prova l’esercizio

fonte: https://www.w3schools.com/html/html5_webstorage.asp

Commenti

Post popolari in questo blog

Simulazioni di reti (con Cisco Packet Tracer)

Esercizi sulla rappresentazione della virgola mobile IEEE 754 (Floating Point)