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.
<!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>
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
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Utilizzare l'operatore GroupBy come ultima istruzione di una query LINQ in Entity Framework
Utilizzare database e servizi con gli add-on di Container App
Criptare la comunicazione con mTLS in Azure Container Apps
Eseguire query manipolando liste di tipi semplici con Entity Framework Core
Migrare una service connection a workload identity federation in Azure DevOps
Effettuare il download di un file via FTP con la libreria FluentFTP di .NET
Inizializzare i container in Azure Container Apps
Utilizzare ChatGPT con Azure OpenAI
Usare ASP.NET Core dev tunnels per testare le applicazioni su internet
Gestire liste di tipi semplici con Entity Framework Core
Utilizzare i nuovi piani dedicati di Azure Container Apps
Installare le Web App site extension tramite una pipeline di Azure DevOps