JavaScript Storage API

Introduzione alla Storage API

Nello sviluppo web moderno, gestire i dati in modo efficiente è fondamentale. La Web Storage API di JavaScript offre un modo semplice e sincrono per memorizzare coppie chiave/valore direttamente nel browser, senza alcun accesso al server. È lo strumento più comune per ricordare le preferenze dell'utente, memorizzare nella cache piccole quantità di dati e mantenere lo stato dell'interfaccia tra un ricaricamento e l'altro della pagina.

Questa guida tratta i due oggetti di storage esposti dall'API — localStorage e sessionStorage — insieme all'intero set di metodi, come memorizzare oggetti, come reagire ai cambiamenti tra schede e le insidie più comuni. Entrambi gli oggetti condividono la stessa interfaccia (l'interfaccia Storage); l'unica differenza è per quanto tempo i dati rimangono e con quale ampiezza vengono condivisi.

Poiché il Web Storage non viene mai inviato al server, non è adatto ai token di autenticazione di cui il backend ha bisogno — per quello ci sono i cookie.

L'interfaccia Storage

Ogni valore nel Web Storage è una string. Sia localStorage che sessionStorage espongono gli stessi cinque metodi più una proprietà length:

Gli esempi seguenti usano localStorage, ma ogni metodo funziona in modo identico su sessionStorage.

Comprendere localStorage

localStorage memorizza i dati senza data di scadenza. I dati persistono anche dopo la chiusura e riapertura della finestra del browser, rendendolo ideale per dati a lunga durata come preferenze utente, la scelta del tema o una bozza di modulo.

Memorizzare dati in localStorage

Per memorizzare dati, usa il metodo setItem con una chiave e un valore:

// Storing data in localStorage
localStorage.setItem('username', 'JohnDoe');

Entrambi gli argomenti vengono convertiti in string. Scrivere setItem('count', 5) memorizza in realtà la string "5", quindi ricordati di riconvertire al momento della lettura.

Recuperare dati da localStorage

Usa getItem per leggere un valore. Se la chiave non esiste, ottieni null (non undefined):

// Retrieving data from localStorage
const username = localStorage.getItem('username');
console.log(username);                 // "JohnDoe"
console.log(localStorage.getItem('missing')); // null

Rimuovere dati da localStorage

Elimina una singola chiave con removeItem, oppure cancella tutto per l'origine con clear:

// Remove one key
localStorage.removeItem('username');

// Remove every key for this origin
localStorage.clear();

clear() agisce solo sull'origine corrente (schema + host + porta); non tocca mai i dati di un altro sito.

Memorizzare oggetti: JSON.stringify e JSON.parse

Poiché i valori di storage devono essere string, non puoi memorizzare un object direttamente — setItem('user', {name: 'Ann'}) memorizzerebbe la string inutile "[object Object]". Serializza con JSON.stringify in entrata e JSON.parse in uscita:

const user = { name: 'Ann', theme: 'dark', visits: 3 };

// Save: serialize the object to a JSON string
localStorage.setItem('user', JSON.stringify(user));

// Load: parse the string back into an object
const restored = JSON.parse(localStorage.getItem('user'));
console.log(restored.theme); // "dark"
console.log(restored.visits + 1); // 4

Vedi Lavorare con JSON per approfondire la serializzazione, e Oggetti JavaScript per le basi sugli oggetti.

Iterare sulle chiavi memorizzate

Usa length insieme a key(index) per scorrere tutto ciò che è memorizzato per l'origine:

localStorage.setItem('a', '1');
localStorage.setItem('b', '2');

for (let i = 0; i < localStorage.length; i++) {
  const name = localStorage.key(i);
  console.log(`${name} = ${localStorage.getItem(name)}`);
}
// a = 1
// b = 2

Utilizzare sessionStorage

sessionStorage condivide la stessa API ma ha una durata più breve, limitata alla scheda. I dati vengono cancellati al termine della sessione di pagina — cioè, quando la scheda viene chiusa. Aprire lo stesso sito in una seconda scheda crea un sessionStorage separato, quindi le due schede non vedono mai i dati dell'altra. Questo lo rende perfetto per dati che non devono trasparire tra le schede, come l'avanzamento di un wizard a più passaggi.

// Store, read, and remove — same methods as localStorage
sessionStorage.setItem('sessionName', 'Session1');
console.log(sessionStorage.getItem('sessionName')); // "Session1"
sessionStorage.removeItem('sessionName');

Reagire ai cambiamenti tra schede

Quando localStorage cambia in una scheda, il browser lancia un evento storage in tutte le altre schede della stessa origine (ma non nella scheda che ha effettuato la modifica). Questo ti consente di mantenere più schede sincronizzate — ad esempio, disconnettere l'utente ovunque contemporaneamente:

window.addEventListener('storage', (event) => {
  // event.key, event.oldValue, event.newValue, event.url
  if (event.key === 'theme') {
    console.log('Theme changed in another tab to', event.newValue);
  }
});

Nota: l'evento storage si attiva solo per localStorage (condiviso tra schede), non per sessionStorage.

Gestire errori e limiti

Le scritture possono generare un QuotaExceededError quando si supera il limite di ~5 MB, e lo storage potrebbe non essere disponibile nella navigazione in incognito o quando i cookie sono disabilitati. Racchiudi le scritture in try...catch e rileva la funzionalità prima di fare affidamento sull'API:

function safeSet(key, value) {
  try {
    localStorage.setItem(key, value);
    return true;
  } catch (err) {
    // QuotaExceededError, or storage blocked by the browser
    console.warn('Storage write failed:', err.name);
    return false;
  }
}

console.log(safeSet('theme', 'dark')); // true (when storage is available)

Best practice per l'utilizzo del Web Storage

• Sicurezza: Considera sempre le implicazioni di sicurezza nel memorizzare dati sensibili nel browser. Evita di salvare informazioni riservate come password o dati identificativi personali.
• Limiti di storage: Tieni presente i limiti di capacità (solitamente circa 5 MB) e gestisci i casi in cui lo storage potrebbe essere pieno.
• Compatibilità tra browser: Assicurati che il tuo codice gestisca gli scenari in cui un browser potrebbe non supportare le Storage API.
• Storage solo di string: Il Web Storage accetta solo string. Usa JSON.stringify() per salvare oggetti e JSON.parse() per recuperarli.
• Sincronizzazione tra schede: Usa StorageEvent per ascoltare i cambiamenti effettuati in altre schede e mantenere i dati sincronizzati.

Un esempio completo per capire tutto

Questa demo mostra come usare la Web Storage API, inclusi sia localStorage che sessionStorage. Hai dei pulsanti per memorizzare, recuperare e rimuovere dati dallo storage:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Storage API Interactive Demo</title>
  </head>
  <body>
    <h2>localStorage and sessionStorage Demo</h2>
    <div style="display: flex; gap: 10px">
      <button onclick="storeInLocal()">Store in localStorage</button>
      <button onclick="retrieveFromLocal()">Retrieve from localStorage</button>
      <button onclick="removeFromLocal()">Remove from localStorage</button>
    </div>

    <div style="margin: 20px 0" id="localStorageResult"></div>

    <div style="display: flex; gap: 10px; margin-top: 10px">
      <button onclick="storeInSession()">Store in sessionStorage</button>
      <button onclick="retrieveFromSession()">
        Retrieve from sessionStorage
      </button>
      <button onclick="removeFromSession()">Remove from sessionStorage</button>
    </div>

    <div style="margin-top: 20px" id="sessionStorageResult"></div>

    <script>
      function storeInLocal() {
        localStorage.setItem("demo", "Hi from LocalStorage!");
        document.getElementById("localStorageResult").textContent =
          "Stored in localStorage: " + localStorage.getItem("demo");
      }

      function retrieveFromLocal() {
        const value = localStorage.getItem("demo") || "Nothing in localStorage";
        document.getElementById("localStorageResult").textContent =
          "Retrieved from localStorage: " + value;
      }

      function removeFromLocal() {
        localStorage.removeItem("demo");
        document.getElementById("localStorageResult").textContent =
          "Item removed from localStorage.";
      }

      function storeInSession() {
        sessionStorage.setItem("demo", "Hi from SessionStorage!");
        document.getElementById("sessionStorageResult").textContent =
          "Stored in sessionStorage: " + sessionStorage.getItem("demo");
      }

      function retrieveFromSession() {
        const value =
          sessionStorage.getItem("demo") || "Nothing in sessionStorage";
        document.getElementById("sessionStorageResult").textContent =
          "Retrieved from sessionStorage: " + value;
      }

      function removeFromSession() {
        sessionStorage.removeItem("demo");
        document.getElementById("sessionStorageResult").textContent =
          "Item removed from sessionStorage.";
      }
    </script>
  </body>
</html>

• LocalStorage: I dati memorizzati qui rimangono anche dopo la chiusura e riapertura del browser, rendendolo perfetto per salvare le preferenze utente o altri dati a lungo termine.
• SessionStorage: È simile a localStorage ma i dati vengono cancellati al termine della sessione (ad esempio quando il browser viene chiuso).

Facendo clic sui vari pulsanti, puoi vedere come i dati vengono aggiunti, recuperati e rimossi da ciascun tipo di storage. I risultati vengono mostrati direttamente sotto ogni pulsante, fornendo un feedback immediato su ciò che accade ai dati nello storage. Questa configurazione interattiva ti aiuta a visualizzare e comprendere come le applicazioni web possono ricordare i dati tra i ricaricamenti di pagina o le sessioni del browser.

Oltre a interagire con le operazioni di storage tramite i pulsanti di questa demo, puoi anche visualizzare e gestire i dati memorizzati direttamente nel browser. Apri gli strumenti per sviluppatori del browser, vai alla sezione Application e poi cerca nella scheda Storage. Qui puoi vedere le voci di localStorage e sessionStorage.

Questo strumento visivo ti consente di vedere gli effetti delle tue azioni (come memorizzare e rimuovere dati) in tempo reale e offre un modo pratico per esplorare il funzionamento del web storage nei browser.

Conclusione

La JavaScript Storage API fornisce un metodo robusto e semplice da usare per gestire i dati nel browser. Comprendendo e sfruttando localStorage e sessionStorage, gli sviluppatori possono migliorare significativamente l'esperienza utente delle loro applicazioni web. Considera sempre la sicurezza e i limiti di storage per garantire che le tue applicazioni siano robuste e facili da usare. Con questi strumenti, puoi creare stati persistenti e funzionalità di gestione dei dati fondamentali per le moderne applicazioni web.

Esercitazione