JAVASCRIPT
JAVASCRIPT
Una limitazione storica di JavaScript era quella di non poter memorizzare dati in maniera persistente.
Infatti si poteva creare variabili, costanti ecc. a runtime, provvedere ad elaborazioni più o meno complesse ma se si ricaricava la pagina o si cambiava la stessa il risultato di tali elaborazioni andava perso.
JavaScript dispone ora di una serie di API che permettono di gestire dati in maniera più flessibile all'interno di Web Storage.
I Web Storage sono da considerare un l'evoluzione dei cookie che consentono ad una applicazione/sito sviluppata in Javascript di memorizzare dati localmente sul browser.
Mettono a disposizione uno spazio disco intorno ai 5MB e le informazioni contenute non vengono mai trasferite al server; rimangono quindi fruibili solo lato client.
Questi dati secondo la "same origin policy" sono accessibili solo agli script che provengono dallo stesso dominio.
La specifica del Web Storage prevede due oggetti per la persistenza dei dati:
| Oggetto | Descrizione |
|---|---|
| localStorage | Consente la memorizzazione permanente dei dati. |
| sessionStorage | Prevede l'eliminazione dei dati alla fine della sessione, che avviene quando viene chiuso il browser o la finestra in cui è eseguita l'applicazione. |
Si tratta di 2 oggetti che vengono utilizzati allo stesso modo e consentono di creare dati in coppie di chiave-valore.
Prima di aggiungere dati allo Storage è opportuno verificarne la disponibilità:
if(localStorage){ console.log("Perfetto Local Storage è disponibile su questo browser");
}
if(!localStorage){ console.log("Ci dispiace ma LocalStorage non è disponbile su questo browser");
}
L'aggiunta di dati allo Storage, indipendentemente dalla sua tipologia locaStorage o sessionStorage, è possibile mediante l'aggiunta di proprietà agli stessi oggetti.
localStorage.nome = "Mario"; localStorage.cognome ="Rossi"; localStorage.email = "mario.rossi@gmail.com";
A differenza però delle proprietà di un normale oggetto JavaScript, i valori assegnabili ad una proprietà dello storage devono essere sempre di tipo stringa.
Se necessitiamo quindi di memorizzare dati complessi come oggetti o array, dobbiamo prima serializzarli in JSON con il metodo .stringify():
sessionStorage.utente = JSON.stringify({
nome: "Mario",
cognome: "Rossi",
email: "mario.rossi@gmail.com",
telefono: "+3313331324"
});
Per riutilizzarli dovremo preoccuparci di deserializzarli con il metodo .parse():
var utente = JSON.parse(sessionStorage.utente);
localStorage e sessionStorage sono degli oggetti al cui interno memorizzare dati che si presenta in questo modo:
Storage {nome: 'Mario', email: 'mario.rossi@mail.com', cognome: 'Rossi'}
come per un qualsiasi un oggetto JavaScript, possiamo considerare lo storage come un array associativo ed accedere ai suoi elementi tramite chiave:
//recuperare il valore con sintassi array indicando la chiave var nomeUtente = localStorage['nome']; //sostituire il valore locaStorage['nome'] = "Giovanni";
L'oggetto "Storage" dispone di metodi utili per la gestione della memoria dedicata.
| Metodi | Descrizione |
| localStorage.getItem("chiave") | consente di prendere il valore di una chiave dallo storage |
| localStorage.setItem("chiave", "valore") | consente di modificare il valore di una chiave dallo storage |
| localStorage.removeItem("chiave") | consente di rimuovere una chiave dallo storage |
| localStorage.clear() | elimina tutte le chiavi |
Abbiamo a disposizione un particolare evento che memorizza dati sulla gestione degli storage e informazioni aggiuntive il tutto in maniera asincrona.
window.addEventListener("storage", function(event) { console.log("La pagina " + event.url + " ha modificato la chiave " + event.key + " sostituendo il valore " + event.oldValue + " con il valore " + event.newValue); });
L'evento "storage" si applica all'oggetto window e restituisce all'interno della funzione di callback contenuta nell'handler, un particolare oggetto "event" che chiameremo "storageEvent".
Questo oggetto, come visto nell'esempio precedente, ha una serie di proprietà utili:
| Proprietà | Descrizione |
| storageEvent.url | restituisce l'URL della pagina che ha effettuato la modifica |
| storageEvent.key | restituisce la chiave dello storage che è stata modificata |
| storageEvent.oldValue | restituisce il vecchio valore della chiave modificata |
| storageEvent.newValue | restituisce il nuovo valore della chiave modificata |