Da più di 10 anni una parte dei dati delle applicazioni web viene salvata in piccoli file di testo chiamati "cookie". Questi file, creati lato server (o con JavaScript) possono contenere dati di tipo chiave/valore ed il loro utilizzo è abbastanza vario: processi di autenticazione, carrelli della spesa dei siti di e-commerce, impostazioni di colori o altro su di un sito, tracciabilità delle abitudini dell'utente, ecc.
Il limite principale dei cookie è che non si possono salvare più di 4 Kb di dati, per cui non è possibile utilizzarli in scenari che richiedono la gestione di un quantitativo di dati superiore.
Inoltre i cookie vengono scambiati tra client e server ad ogni richiesta HTTP, aumentando sensibilmente il traffico da e verso il web server, non giovando alle performance generali del sito.
HTML5 introduce in modo nativo e condiviso tra i browser una nuova interfaccia di programmazione (API): Web Data Storage.
Esistono due tipi di storage:
- localStorage dove la persistenza dei dati è tale per cui, in caso di sessione scaduta di una pagina, chiusura del browser e/o tab ecc. i dati rimangono disponibili per accessi successivi e da tutte le finistre e/o tab del browser;
- sessionStorage, più restrittivo rispetto a localStorage in quanto non è possibile avere la persistenza dei dati su più finestre e/o tab del browser e, in caso di chiusura di quest'ultimo, non è possibile recuperare i dati salvati.
Web Data Storage è supportato da tutti i browser moderni (in Internet Explorer a partire dalla versione 8) e tipicamente mette a disposizione 5 MB per il salvataggio dei dati di ogni applicazione.
Per determinare se il browser in uso supporta o meno questa API possiamo utilizzare la seguente funzione JavaScript:
function isStorageAvailable(storageType) // "localStorage" || "sessionStorage" { try { return (storageType in window && window[storageType] !== null); } catch(e) { return false; } }
Oppure, più semplicemente, utilizzando la libreria Modernizr:
if (Modernizr.localstorage) // Modernizr.sessionStorage { // codice per l'utilizzo della funzionalità } else { //codice alternativo per salvare i dati }
Scrivere e leggere i dati nello storage
Entrambi i tipi di storage espongono gli stessi metodi (come detto prima le uniche differenze tra i due sono il tipo di persistenza e l'isolamento dei dati).È possibile salvare i dati invocando il metodo setItem dello storage e specificando nei due parametri richiesti rispettivamente il nome della chiave e il valore corrispondente:
localStorage.setItem("color", "Red");
Oppure, più semplicemente, utilizzando la sintassi:
localStorage.color = "Red";
Per recuperare i dati salvati è possibile utilizzare il metodo getItem:
var color = localStorage.getItem("color");
Oppure:
var color = localStorage.color;
È anche possibile iterare l'intera collezione di chiavi memorizzate, come mostrato nell'esempio seguente:
localStorage.setItem("name", "Mario"); localStorage.setItem("lastName", "Rossi"); localStorage.setItem("telefono", "123456789"); var k, v; for (int i=0; i < localStorage.length; i++) { k = localStorage.key(i); // ottiene una chiave dalla sua posizione nell'indice valore = localStorage.getItem(k); dati = "Chiave " + k + ", valore: " + v; alert(dati); }
Eliminazione dei dati
Per eliminare un dato specifico (in base ad una chiave) è sufficiente richiamare il metodo removeItem:localStorage.removeItem("color");
Per cancellare completamente ogni dato memorizzato dalla nostra applicazione nello storage possiamo utilizzare il metodo clear:
localStorage.clear();
Commenti
Per inserire un commento, devi avere un account.
Fai il login e torna a questa pagina, oppure registrati alla nostra community.
Approfondimenti
Aprire una finestra di dialogo per selezionare una directory in WPF e .NET 8
.NET Aspire per applicazioni distribuite
Anonimizzare i dati sensibili nei log di Azure Front Door
Utilizzare Azure AI Studio per testare i modelli AI
Ottenere un token di accesso per una GitHub App
Creare una libreria CSS universale - Rotazione degli elementi
Creare una libreria CSS universale: Nav menu
Configurare lo startup di applicazioni server e client con .NET Aspire
Creare agenti facilmente con Azure AI Agent Service
Creare una libreria CSS universale: Clip-path
Introduzione ai web component HTML
Configurare il nome della run di un workflow di GitHub in base al contesto di esecuzione