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
Popolare una classe a partire dal testo, con Semantic Kernel e ASP.NET Core Web API
Utilizzare il metodo ExceptBy per eseguire operazione di sottrazione tra liste
Ottimizzare le performance usando Span<T> e il metodo Split
Utilizzare Intersect e Except per filtrare set di dati in TSql
Gestire progetti .NET + React in .NET Aspire
Inference di dati strutturati da testo con Semantic Kernel e ASP.NET Core Web API
Gestione dei nomi con le regole @layer in CSS
Generare una User Delegation SAS in .NET per Azure Blob Storage
Configurare e gestire sidecar container in Azure App Service
Creare una libreria CSS universale - Rotazione degli elementi
Proteggere le risorse Azure con private link e private endpoints
Gestione degli eventi nei Web component HTML
I più letti di oggi
- Documentare i servizi REST con Swagger e OpenAPI con .NET 9
- Sfruttare i nuovi overload di TimeSpan.From* per creare timespan usando numeri interi
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!
- ecco tutte le novità pubblicate sui nostri siti questa settimana: https://aspit.co/wkly buon week-end!