Categorie
Javascript Programmazione

{JS} API Storage: Web Storage

Cos’è l’API Web Storage?

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.

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.

Tipi di Web Storage

La specifica del Web Storage prevede due oggetti per la persistenza dei dati:

OggettoDescrizione
localStorageConsente la memorizzazione permanente dei dati.
sessionStoragePrevede 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");
}

Aggiungere e manipolare dati

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

Metodi dell’oggetto Storage

L’oggetto “Storage” dispone di metodi utili per la gestione della memoria dedicata.

MetodiDescrizione
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

L’evento “storage”

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”.

storageEvent Object

Questo oggetto, come visto nell’esempio precedente, ha una serie di proprietà utili:

ProprietàDescrizione
storageEvent.urlrestituisce l’URL della pagina che ha effettuato la modifica
storageEvent.keyrestituisce la chiave dello storage che è stata modificata
storageEvent.oldValuerestituisce il vecchio valore della chiave modificata
storageEvent.newValuerestituisce il nuovo valore della chiave modificata

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *