Categorie
Programmazione

Web Storage HTML5: un’alternativa ai cookies

Esempi di utilizzo

Introduciamo qualche snippet JavaScript relativo all’utilizzo dello Web Storage. I principi di funzionamento del  SessionStorage e del LocalStorage sono gli stessi, così come le loro API, per cui possiamo fare un po’ di pratica scegliendone soltanto uno dei due. L’unica differenza, come già detto, sarà il contesto (o scope) di esistenza dei dati memorizzati nel browser. Iniziamo verificando che il browser supporti il Web Storage  

function checkSupport() {

  try {

return 'localStorage' in window && window['localStorage'] !== null ;

  } catch(e) {

return false ;

  }

}

La funzione ritorna true se il browser supporta il Web Storage. Oltre a questo controllo dobbiamo verificare anche il supporto dei normali cookies: qui trascuriamo il codice di controllo dei cookies perché dovrebbe essere una pratica già nota, nonché abbondantemente documentata sul Web. Dopo aver verificato il supporto della tecnologia iniziamo a memorizzare qualche dato

localStorage.setItem("my-key", "10") ;

localStorage["another-key"] = "42" ;

qui sopra abbiamo memorizzato due informazioni, ciascuna caratterizzata dalla struttura chiave-valore. Nel primo caso abbiamo usato un metodo setter per memorizzare il valore “10” associato alla chiave “my-key”. Nel secondo caso abbiamo usato la notazione standard JavaScript per associare il valore “42” alla chiave “another-key”.  Il risultato è comunque lo stesso: le due sintassi sono equivalenti. In particolare ricordiamo che in JavaScript qualunque proprietà di un oggetto può essere scritta o letta usando la notazione degli array associativi, come nel caso qui sopra.

Quando dobbiamo leggere i valori memorizzati nel  LocalStorage usiamo le seguenti istruzioni

 

var v1 = localStorage.getItem("my-key") ;

var v2 = localStorage["another-key"] ;

Il procedimento è davvero semplice. L’unica accortezza riguarda il data type dei valori memorizzati in questo modo, che è sempre di tipo stringa. Ciò significa che i numeri memorizzati nell’esempio in realtà sono archiviati come le stringhe “10” e “42” anziché come i numeri 10 e 42. Un modo semplice di verificarlo è il seguente

var v1 = localStorage.getItem("my-key") ;

var v2 = localStorage.getItem("another-key") ;

alert("Ordinary sum (strings) -> " + (v1 + v2)) ;

alert("Parsed sum (integers)  -> " + (parseInt(v1) + parseInt(v2)) ) ;

Il primo alert ritornerà come risultato la somma delle due stringhe, cioè la loro concatenazione, che in questo caso vale “1042”. Il secondo alert ritornerà invece come risultato la somma dei numeri, cioè 52.

Lascia un commento

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.