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
Usare una container image come runner di GitHub Actions
Creare alias per tipi generici e tuple in C#
Migrare una service connection a workload identity federation in Azure DevOps
Installare le Web App site extension tramite una pipeline di Azure DevOps
Aggiungere interattività lato server in Blazor 8
Personalizzare l'errore del rate limiting middleware in ASP.NET Core
Eseguire operazioni con timeout in React
Sfruttare MQTT in cloud e in edge con Azure Event Grid
Eseguire attività con Azure Container Jobs
Miglioramenti nelle performance di Angular 16
Routing statico e PreRendering in una Blazor Web App
Utilizzare politiche di resiliency con Azure Container App
I più letti di oggi
- I nuovi metodi degli array di ECMAScript 5
- Evitare (o ridurre) il repo-jacking sulle GitHub Actions
- Un custom control BoundField con dropdownlist
- .NET Core 3, C#8 and beyond
- Utilizzare long polling in HTML5 per richieste in real time
- Utilizzare le shortcut da tastiera con KeyboardAccelerator nella Universal Windows Platform
- Microsoft Security Bulletin MS05-048