Dall'archivio script > HTML5

Salvare dati sul client con Web Storage

di Andrea ColaciAndrea Colaci,

In un'applicazione web genere è buona norma, in genere, ridurre al minimo il numero di richieste verso il server, ad esempio quando occorre reperire dei dati che non variano frequentemente o memorizzare temporaneamente lo stato sul client. Questa affermazione trova maggiore riscontro in un contesto, tipicamente quello mobile, in cui la banda e la disponibilità della rete possono essere molto limitate.
In situazioni simili, avendo a disposizione un browser moderno, è possibile sfruttare un repository lato client in grado di memorizzare una discreta quantità di dati, in maniera molto simile ai cookies ma con meno limitazioni in termini di spazio: il Web Storage.

La specifica HTML5 prevede la disponibilità di due "contenitori" di coppie chiave-valore (entrambi string) che operano con scope differente:

sessionStorage: può contere dati in maniera "volatile" per un limitato intervallo di tempo
localStorage: contiene dati in maniera "durevole", ovvero fino a quando l'utente non ne richiede la cancellazione tramite le funzionalità del browser

Per sfruttare il web storage è sufficiente richiamare i metodi setItem e getItem come illustrato nell'esempio, verificando la persistenza del localStorage attraverso sessioni di navigazione differenti.

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Web Storage</title>
</head>
<body>
  <h1>Web Storage</h1>
   <div>
      <label for="session">Session Storage:</label>
      <input type="text" id="session" value=""/>          
    </div>
    <div>
      <label for="local">Local Storage:</label>
      <input type="text" id="local" value="" />
    </div>
    <input type="button" id="save" value="Save values" />
   <input type="button" id="load" value="Load values" />
</body>
</html>

JavaScript
document.querySelector('#load') .addEventListener('click', function() {

  document.querySelector('#session').value = sessionStorage.getItem('key1');
  document.querySelector('#local').value = localStorage.getItem('key2'); 

} ,false);

document.querySelector('#save') .addEventListener('click', function(){

    sessionStorage.setItem('key1', document.querySelector('#session').value);
    localStorage.setItem('key2', document.querySelector('#local').value);

} ,false);

Il Web Storage consente di memorizzare valori in forma testuale, questo non significa che se volessimo salvare un tipo complesso o una struttura dati, dovremo provvedere al codice necessario per la relativa serializzazione e de-serializzazione, magari utilizzando la notazione JSON.

Prima di lanciarci nell'utilizzo del Web Storage, è opportuno notare che questa funzionalità, sebbene supportata dal browser potrebbe essrere stata disabilitata. Inoltre la quantità di spazio che Web Storage mette a disposizione non è dichiarato nella specifica ed è variabile in base al vendor, nel caso in cui l'applicazione ecceda la soglia iniziale, il browser chiederà conferma all'utente prima di utilizzare ulteriore spazio aggiuntivo. In questo caso il codice client-side, dovrà gestire opportunamente un'eccezione QuotaExceededError.

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti

I più letti di oggi