LocalStorage in JavaScript: quando usarlo e perché è meglio dei cookie

Introduzione: Che cos’è localStorage e a cosa serve

Nel vasto panorama dello sviluppo web, uno dei compiti più frequenti è la gestione dei dati lato client, in particolare quando si tratta di rendere l’esperienza utente più fluida e personalizzata. Alcuni anni fa, prima dell’avvento di tecnologie più moderne, l’unico modo per conservare informazioni tra una pagina e l’altra (o tra una sessione e l’altra) era l’utilizzo dei cookie. I cookie, infatti, sono file di testo che possono conservare dati sul browser dell’utente, ma come ogni tecnologia, hanno dei limiti.

Con l’arrivo di HTML5, è stato introdotto il concetto di Web Storage, che include due principali oggetti per la memorizzazione di dati lato client: sessionStorage e localStorage. Mentre i cookie vengono inviati al server ad ogni richiesta (andando a gravare sulla larghezza di banda e sulla performance generale), il Web Storage rimane esclusivamente sul client, fornendo un metodo di lettura e scrittura veloce e flessibile. In questa nuova realtà, localStorage è diventato un vero e proprio “game changer”.

In questo articolo esploreremo a fondo:

• Le differenze tra cookie, localStorage e sessionStorage
• I vantaggi principali di localStorage (tra cui velocità e capienza)
• Esempi pratici di utilizzo (dark mode, form temporanei, preferenze utente)
• Aspetti di sicurezza, limiti e best practice
• Quando evitare localStorage e perché
• Una checklist rapida delle situazioni ideali per usare localStorage

L’obiettivo è farti capire non solo come usare localStorage in JavaScript, ma soprattutto quando usarlo in modo efficace e sicuro, distinguendo i casi d’uso in cui la scelta di localStorage è ottimale e quando invece conviene puntare su altre soluzioni.

Differenze principali tra cookie, localStorage e sessionStorage

Quando si parla di persistenza dei dati lato client, spesso si fa confusione tra i vari approcci possibili. Ecco quindi un confronto chiaro tra queste tre tecnologie:

1. Cookie
   • Capienza: in genere limitata a circa 4 KB per singolo cookie, anche se il limite varia leggermente da browser a browser.
   • Scopo: ideati inizialmente per conservare informazioni di tracciamento e sessioni di login. Oggi, vengono usati in parte anche per questioni di analisi, tracciamento marketing (vedi cookie di terze parti), e salvataggio di preferenze di base.
   • Inoltro al server: ogni volta che il browser effettua una richiesta HTTP al server, i cookie associati al dominio vengono inviati, aumentando il payload della richiesta e, di conseguenza, consumando banda.
   • Scadenza: i cookie possono essere di sessione (si cancellano alla chiusura del browser) o persistenti (scadenza impostata dal server o dal client).
   • Sicurezza: possono essere protetti con attributi come HttpOnly (per evitare l’accesso via JavaScript) o Secure (trasmissione protetta solo su HTTPS), ma sono comunque inclini ad attacchi come session hijacking e XSS se non gestiti correttamente.
2. sessionStorage
   • Capienza: simile a localStorage (spesso diversi MB), ma varia leggermente in base al browser.
   • Scopo: memorizzare dati relativi a una singola sessione di navigazione. Appena la finestra o la tab del browser viene chiusa, i dati vengono eliminati.
   • Inoltro al server: i dati non vengono inviati al server ad ogni richiesta. Rimangono sul client.
   • Scadenza: i dati rimangono finché la tab è aperta. Se chiudi la tab o il browser, i dati spariscono.
   • Sicurezza: come localStorage, non vengono inviati al server, riducendo possibili falle di sicurezza. Tuttavia, se il sito è vulnerabile a XSS (Cross-Site Scripting), i dati in sessionStorage possono essere letti e manipolati da attaccanti.
3. localStorage
   • Capienza: in genere offre uno spazio di archiviazione che va da 2 MB a 10 MB (o più), dipende dal browser. Comunque è molto maggiore rispetto a 4 KB dei cookie.
   • Scopo: memorizzazione di dati su base per-browser e per-dominio, senza scadenza definita di default. Permette di salvare preferenze, impostazioni e quant’altro, garantendo che, anche dopo la chiusura del browser, i dati siano ancora disponibili alla riapertura.
   • Inoltro al server: non viene inviato nulla al server ad ogni richiesta, riducendo il carico di rete. Tutta la lettura e scrittura avviene localmente tramite JavaScript.
   • Scadenza: i dati persistono fino a quando non vengono esplicitamente rimossi dal codice JavaScript o manualmente dall’utente (ad esempio, pulendo la cache del browser).
   • Sicurezza: come sessionStorage, non si inviano dati al server. Resta vulnerabile a potenziali attacchi XSS se il sito non è ben protetto.

Differenza localStorage e cookie in breve

• Spazio di archiviazione: localStorage ha una capienza molto maggiore rispetto ai cookie.
• Performance: i cookie appesantiscono le richieste HTTP, mentre localStorage no.
• Persistenza: i cookie possono avere una scadenza, localStorage rimane finché non viene rimosso.
• Uso pratico: localStorage è ottimo per salvare impostazioni e preferenze di un’app web “offline”, i cookie sono fondamentali per gestire l’autenticazione o per conservare informazioni che il server deve ricevere a ogni richiesta.

Vantaggi di localStorage (velocità, dimensione, accesso client-side)

Perché localStorage è considerato una soluzione superiore ai cookie in molti scenari? Ecco una panoramica dei suoi principali vantaggi.

1. Maggiore capacità
   Se i cookie mettono a disposizione pochi KB di spazio, localStorage porta la memorizzazione locale a livelli di qualche MB. Questo significa poter archiviare dati più corposi senza dover ricorrere a server esterni o a database. In certe applicazioni, soprattutto quelle che necessitano di funzionare anche offline, disporre di più spazio in locale è cruciale.
2. Velocità
   Poiché localStorage non viene incluso in ogni singola richiesta HTTP, il caricamento delle pagine risulta più leggero e veloce. Immagina di avere un e-commerce con centinaia di richieste al server al giorno per utente: se utilizzi cookie di grandi dimensioni, stai aumentando la dimensione di ogni richiesta, con effetti negativi sulle performance.
3. Semplicità di utilizzo con JavaScript
   L’API di localStorage è estremamente intuitiva. Hai a disposizione metodi come setItem(), getItem() e removeItem(). Per esempio: javascriptCopiaModifica// Questo snippet di codice NON è incluso nel conteggio parole localStorage.setItem('chiave', 'valore'); const datoSalvato = localStorage.getItem('chiave'); console.log(datoSalvato); // Stampa "valore" Non sono necessarie librerie esterne, configurazioni particolari o manipolazioni di stringhe come spesso avviene con i cookie.
4. Persistenza senza scadenza
   A differenza dei cookie (che hanno spesso una data di scadenza, dopo la quale vengono eliminati), i dati in localStorage rimangono fino a quando non vengono rimossi manualmente. Questo è molto utile per conservare preferenze a lungo termine o per gestire funzioni di “ricorda i miei dati” in moduli complessi.
5. Riduzione del carico sul server
   Non inoltrando i dati ad ogni richiesta, localStorage riduce la quantità di informazioni che il server deve elaborare, con benefici in termini di performance complessive.
6. Maggiore controllo sulle informazioni
   Con localStorage, hai un controllo più diretto sulle informazioni: decidi tu quando scrivere, leggere o cancellare. Non c’è il rischio che un header HTTP errato possa sovrascrivere un cookie, né c’è la necessità di specificare domini e path di validità.

Esempi pratici di utilizzo (salvare preferenze, dark mode, form temporanei)

Uno dei modi migliori per capire la potenza di localStorage è vederlo in azione con esempi concreti.

3.1 Salvare preferenze utente

Immagina un’applicazione web dove l’utente può scegliere la lingua preferita (italiano, inglese, spagnolo, ecc.). Grazie a localStorage:

• Puoi salvare la lingua selezionata in locale.
• Alla successiva apertura del sito, la pagina viene già caricata in quella lingua, senza dover chiedere nuovamente la preferenza.

Esempio di codice (non conteggiato nella lunghezza del testo):

// Salvataggio lingua
function salvaLingua(lingua) {
  localStorage.setItem('linguaPreferita', lingua);
}

// Lettura lingua
function getLingua() {
  return localStorage.getItem('linguaPreferita') || 'it'; // default italiano
}

3.2 Dark mode

Oggi molte applicazioni includono un “Dark Mode” (o tema scuro) per migliorare la leggibilità di notte e per motivi di stile. Con localStorage, mantenere la scelta dell’utente è semplice:

• L’utente attiva la modalità scura con un toggle (interruttore).
• Scrivi in localStorage il valore temaScelto = "dark" o temaScelto = "light".
• Al caricamento della pagina, leggi temaScelto e applichi dinamicamente le classi CSS per il tema.

// Esempio di gestione Dark Mode
const toggleDarkMode = document.getElementById('darkModeToggle');

toggleDarkMode.addEventListener('click', () => {
  document.body.classList.toggle('dark-mode');
  const isDarkMode = document.body.classList.contains('dark-mode');
  localStorage.setItem('darkMode', isDarkMode ? 'enabled' : 'disabled');
});

// Al caricamento
window.addEventListener('load', () => {
  const darkStatus = localStorage.getItem('darkMode');
  if (darkStatus === 'enabled') {
    document.body.classList.add('dark-mode');
  }
});

3.3 Form temporanei

Potrebbe capitare di voler salvare i dati di un form in modo temporaneo, soprattutto se l’utente rischia di perdere tutto se ricarica la pagina o chiude accidentalmente la tab. Ad esempio, in un form di contatto con molti campi, potresti:

• Salvare i campi ogni tot secondi o ad ogni modifica.
• Se l’utente lascia la pagina e poi ritorna, i dati compilati in precedenza sono ancora lì.

// Ogni volta che l'utente modifica un campo, salviamo in localStorage
const formFields = document.querySelectorAll('.campoForm');

formFields.forEach(field => {
  field.addEventListener('input', () => {
    localStorage.setItem(field.name, field.value);
  });
});

// Al caricamento della pagina, ripristiniamo i valori
formFields.forEach(field => {
  const savedValue = localStorage.getItem(field.name);
  if (savedValue) {
    field.value = savedValue;
  }
});

Sicurezza, limiti e best practice

4.1 Sicurezza localStorage

Anche se localStorage non viene inviato al server, i dati che contiene non sono crittografati di default. Significa che:

• Se un malintenzionato riesce ad eseguire JavaScript iniettato (XSS) sulla pagina, potrà leggere e modificare i dati presenti in localStorage.
• Non è consigliabile conservare dati sensibili come password in localStorage. In caso di XSS, i dati potrebbero essere esfiltrati.
• L’unico modo per proteggere i dati in localStorage è assicurarsi che l’applicazione sia immune da XSS e, se necessario, applicare tecniche di crittografia prima di scrivere i valori. Tuttavia, anche in quel caso, la chiave di crittografia dovrebbe stare da qualche parte nel codice JavaScript (quindi potenzialmente accessibile).

4.2 Limiti dimensionali e restrizioni

Nonostante i diversi MB disponibili, esistono dei limiti:

• Ogni browser ha un limite massimo (in genere tra 2.5 MB e 10 MB).
• Se un utente disabilita il JavaScript o utilizza estensioni che bloccano l’accesso al Web Storage, localStorage potrebbe non funzionare correttamente.
• In alcuni contesti (ad esempio estensioni browser o incognito mode con restrizioni), localStorage può essere bloccato o resettato di frequente.

4.3 Best practice

1. Non archiviare dati critici: come token di accesso, sessioni, password. Se devi farlo, valuta di usare HTTP-only cookies o altri sistemi di sicurezza.
2. Rimani minimalista: salva solo il necessario. Evita di occupare spazio con dati superflui.
3. Attenzione a JSON: in localStorage ogni valore è una stringa. Se devi salvare oggetti complessi, serializzali in JSON e deserializzali alla lettura.
4. Gestione degli errori: usa try/catch quando accedi a localStorage, per gestire eventuali eccezioni (ad esempio, quando lo spazio è pieno).
5. Crittografia opzionale: se proprio devi memorizzare dati sensibili, valuta una crittografia lato client (con tutti i limiti di cui abbiamo parlato).

Quando NON usare localStorage e cosa usare al posto

Nonostante i numerosi vantaggi, localStorage non è sempre la scelta giusta. Ecco i casi in cui dovresti evitarlo:

1. Gestione di sessioni di login
   È generalmente sconsigliato gestire token di autenticazione in localStorage a causa delle vulnerabilità XSS. Molti framework moderni preferiscono utilizzare i cookie con l’attributo HttpOnly. Oppure, se devi usare un token JWT, è consigliabile memorizzarlo in una session cookie sicura (HttpOnly e Secure).
2. Dati di grandi dimensioni
   Se hai bisogno di memorizzare una quantità enorme di dati (superiore a qualche MB), localStorage non è la soluzione. Potrebbe servire un database lato client più sofisticato come IndexedDB, che offre più flessibilità e spazio.
3. Informazioni soggette a scadenza rapida
   Se i dati cambiano frequentemente o devono scadere in tempi brevi, usare localStorage potrebbe crearti confusione, perché i dati persistono finché non li rimuovi manualmente. In tal caso, potresti preferire i cookie di sessione o i sessionStorage.
4. Sicurezza massima
   Se hai bisogno di garantire la massima sicurezza dei dati, localStorage non è l’opzione migliore, a meno che tu non disponga di un sistema server-side che gestisca opportunamente la crittografia e la validazione. In molti scenari, i cookie HTTP-only, combinati con un’architettura sicura lato server, restano la soluzione più robusta.

Cosa usare al posto di localStorage?

• Cookie HTTP-only: per dati sensibili, autenticazione, sessioni.
• sessionStorage: per dati che devono persistere solo durante la sessione.
• IndexedDB: per grosse quantità di dati strutturati, con query complesse.
• Cache di Service Worker: se vuoi gestire contenuti offline in modo avanzato, le PWA (Progressive Web App) spesso usano la cache dei Service Worker per conservare asset e dati richiesti.

Conclusione + checklist delle situazioni ideali per usare localStorage

La tecnologia localStorage in JavaScript rappresenta un’ottima soluzione per memorizzare informazioni lato client in modo semplice e persistente. Rispetto ai cookie, localStorage:

• Offre più spazio.
• Non rallenta le richieste HTTP.
• È di facile utilizzo con l’API JavaScript.

D’altra parte, occorre tenere a mente i rischi di sicurezza (soprattutto XSS) e comprendere che non è una panacea per ogni scenario. È fondamentale scegliere lo strumento più adeguato in base alle necessità di sicurezza, quantità di dati e durata della memorizzazione desiderata.

Checklist rapida per capire se usare localStorage:

1. Dati non sensibili (ad esempio preferenze utente, impostazioni UI).
2. Persistenza a lungo termine (al di là della sessione).
3. Nessun bisogno di invio automatico al server.
4. Nessun obbligo di scadenza specifica.
5. Necessità di spazio superiore ai pochi KB offerti dai cookie.

Se rispondi “sì” a queste domande, localStorage potrebbe davvero fare al caso tuo. Se invece hai vincoli di sicurezza, sessioni da gestire in modo rigoroso o grosse moli di dati, valuta alternative come cookie HTTP-only, sessionStorage o IndexedDB.