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
Change tracking e composition in Entity Framework
Utilizzare Locust con Azure Load Testing
Garantire la provenienza e l'integrità degli artefatti prodotti su GitHub
Usare i servizi di Azure OpenAI e ChatGPT in ASP.NET Core con Semantic Kernel
Triggerare una pipeline su un altro repository di Azure DevOps
Creare una libreria CSS universale - Rotazione degli elementi
Gestire la cancellazione di una richiesta in streaming da Blazor
Generare HTML a runtime a partire da un componente Razor in ASP.NET Core
Recuperare l'ultima versione di una release di GitHub
Creare una libreria CSS universale: Clip-path
Gestione dei nomi con le regole @layer in CSS
Utilizzare Azure Cosmos DB con i vettori