Web Storage: Guida completa a localStorage, sessionStorage, Cookie e IndexedDB

Le moderne applicazioni web necessitano di soluzioni efficienti per mantenere le informazioni lato client. Che si tratti di salvare le preferenze dell'utente, gestire token di autenticazione o creare interfacce in grado di funzionare offline, la scelta del meccanismo di archiviazione corretto è fondamentale. Ogni tecnologia di storage offre caratteristiche specifiche, e utilizzare lo strumento sbagliato può compromettere le prestazioni, esporre a falle di sicurezza o causare perdite di dati.

Tabella Comparativa: Scelta Rapida

Caratteristica   localStorage    sessionStorage   Cookie           IndexedDB
──────────────────────────────────────────────────────────────────────────────
Capacità         5-10 MB         5-10 MB          ~4 KB/cookie     100MB+
Persistenza      Permanente      Tab sessione     Configurabile    Permanente
Invio al Server  No              No               Sì (automatico)  No
Accesso          Sync JS         Sync JS          JS + HTTP        Async JS
Formato dati     Stringa         Stringa          Stringa          Oggetti/Files
Utilizzo ideale  Preferenze      Stato temporaneo Sessione Auth    Dati complessi

localStorage: Persistenza a Lungo Termine

Il localStorage consente di salvare coppie chiave-valore senza una data di scadenza definita. Il dato rimane memorizzato sul browser finché non viene eliminato manualmente dall'utente o rimosso tramite programmazione.

// Salvataggio dati (solo stringhe)
localStorage.setItem('tema', 'dark');
localStorage.setItem('user', JSON.stringify({ nome: 'Mario', id: 42 }));

// Lettura dati
const tema = localStorage.getItem('tema');
const user = JSON.parse(localStorage.getItem('user'));

// Rimozione e pulizia
localStorage.removeItem('tema');
localStorage.clear();

// Verifica spazio occupato
const spazio = new Blob(Object.values(localStorage)).size;
console.log(`Spazio utilizzato: ${(spazio / 1024).toFixed(1)} KB`);

Ideale per: Salvare la modalità "dark/light", preferenze di lingua o stati dell'interfaccia (es. sidebar ridotta).

⚠️ Attenzione: Non utilizzare mai localStorage per memorizzare dati sensibili come token JWT o password. Essendo accessibile da qualsiasi script JavaScript, è vulnerabile ad attacchi XSS.

sessionStorage: Gestione della Tab Corrente

Funziona esattamente come il localStorage, ma con una differenza chiave: la durata dei dati è limitata al ciclo di vita della scheda del browser. Alla chiusura del tab, i dati vengono eliminati.

// Salva lo stato del form mentre l'utente compila
form.addEventListener('input', () => {
  sessionStorage.setItem('bozza', JSON.stringify({ ...data }));
});

// Ripristina al caricamento della pagina
window.addEventListener('load', () => {
  const bozza = sessionStorage.getItem('bozza');
  if (bozza) {
    const dati = JSON.parse(bozza);
    // Popola campi...
  }
});

Ideale per: Form a più step, wizard di configurazione o qualsiasi dato che non deve essere condiviso tra diverse schede dello stesso browser.

Cookie: Comunicazione Server-Client

Il metodo di archiviazione più datato ma indispensabile. A differenza degli altri, i cookie vengono inviati automaticamente dal browser al server ad ogni singola richiesta HTTP, il che li rende lo standard per la gestione delle sessioni.

// Esempio Server-Side (Express.js)
res.cookie('session_id', 'token_sicuro', {
  httpOnly: true,   // Protegge da XSS (inaccessibile da JS)
  secure: true,     // Solo connessioni HTTPS
  sameSite: 'Lax',  // Protezione contro CSRF
  maxAge: 24 * 60 * 60 * 1000 // Scadenza 24 ore
});

// Lettura lato client
console.log(document.cookie);

Ideale per: Identificativi di sessione (Session ID), analisi lato server e preferenze che devono essere lette durante il rendering iniziale lato server.

⚠️ Flag di sicurezza fondamentali:

• httpOnly: Impedisce il furto del token tramite script maligni.
• secure: Garantisce che il cookie viaggia solo su connessioni crittografate.
• sameSite: Mitiga attacchi di tipo Cross-Site Request Forgery (CSRF).

IndexedDB: Un Database Client-Side

IndexedDB non è un semplice "key-value store", ma un vero database orientato agli oggetti. Supporta indici, transazioni ed è asincrono, rendendolo perfetto per gestire grandi volumi di dati o per trasformare web app in Progressive Web Apps (PWA) funzionanti offline.

const richiesta = indexedDB.open('MioDatabase', 1);

richiesta.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('prodotti', { keyPath: 'id' });
};

richiesta.onsuccess = (e) => {
  const db = e.target.result;
  const transazione = db.transaction('prodotti', 'readwrite');
  transazione.objectStore('prodotti').add({ id: 1, nome: 'Articolo', prezzo: 10 });
};

Ideale per: App con modalità offline avanzata, caching di grandi dataset strutturati, gestione di file e blob multimediali.

Guida alla Scelta Definitiva

• Preferenze UI (tema, lingua): → localStorage
• Dati temporanei (form, filtri): → sessionStorage
• Autenticazione utente: → Cookie (HttpOnly/Secure)
• Caching di grandi dati/Offline: → IndexedDB
• Dati che il server deve conoscere: → Cookie