Gestire una bozza persistente con LocalStorage e SessionStorage

Introduzione

Quando si sviluppano interfacce web moderne, spesso serve salvare dati temporanei senza coinvolgere un backend. LocalStorage e SessionStorage sono due strumenti del browser molto utili per questo scopo, perché permettono di memorizzare coppie chiave-valore in modo semplice e veloce.

In questo tutorial vedremo un caso pratico e molto utile: salvare una bozza persistente di un editor o di un campo testo lungo. È un sotto-argomento diverso dal semplice salvataggio di dati di form, perché qui l’obiettivo non è memorizzare ogni campo di un modulo, ma proteggere un contenuto in lavorazione, ad esempio un articolo, una nota, un messaggio o una descrizione lunga.

Lo scenario è realistico: l’utente sta scrivendo un testo, chiude accidentalmente la scheda oppure aggiorna la pagina. Con una piccola integrazione con LocalStorage e SessionStorage possiamo recuperare il contenuto e ridurre il rischio di perdita dei dati.

Codice completo

<h3>Editor bozza con salvataggio automatico</h3>

<p>Scrivi la tua bozza qui sotto. Il contenuto viene salvato automaticamente.</p>

<textarea id="draftEditor" rows="10" cols="60" placeholder="Inizia a scrivere..."></textarea>

<div>
  <button id="clearDraft">Cancella bozza</button>
  <button id="saveNow">Salva subito</button>
</div>

<script>
  const editor = document.getElementById("draftEditor");
  const clearButton = document.getElementById("clearDraft");
  const saveButton = document.getElementById("saveNow");

  const DRAFT_KEY = "articleDraft";
  const DRAFT_SESSION_KEY = "articleDraftSession";

  // 1. Recupera prima la bozza dalla sessione,
  //    poi da LocalStorage se la sessione non contiene nulla.
  const sessionDraft = sessionStorage.getItem(DRAFT_SESSION_KEY);
  const localDraft = localStorage.getItem(DRAFT_KEY);

  if (sessionDraft) {
    editor.value = sessionDraft;
  } else if (localDraft) {
    editor.value = localDraft;
  }

  // 2. Salvataggio automatico con debounce semplice
  let saveTimer;

  editor.addEventListener("input", () => {
    clearTimeout(saveTimer);

    saveTimer = setTimeout(() => {
      const content = editor.value;

      // SessionStorage: utile per il lavoro corrente della scheda
      sessionStorage.setItem(DRAFT_SESSION_KEY, content);

      // LocalStorage: utile per recuperare la bozza anche dopo la chiusura del browser
      localStorage.setItem(DRAFT_KEY, content);

      console.log("Bozza salvata automaticamente");
    }, 300);
  });

  // 3. Salvataggio manuale immediato
  saveButton.addEventListener("click", () => {
    const content = editor.value;
    sessionStorage.setItem(DRAFT_SESSION_KEY, content);
    localStorage.setItem(DRAFT_KEY, content);
    alert("Bozza salvata con successo.");
  });

  // 4. Pulizia completa
  clearButton.addEventListener("click", () => {
    const confirmClear = confirm("Vuoi davvero cancellare la bozza salvata?");
    if (!confirmClear) return;

    editor.value = "";
    sessionStorage.removeItem(DRAFT_SESSION_KEY);
    localStorage.removeItem(DRAFT_KEY);

    alert("Bozza cancellata.");
  });

  // 5. Prima di chiudere la pagina, salva ancora una volta
  window.addEventListener("beforeunload", () => {
    const content = editor.value;
    sessionStorage.setItem(DRAFT_SESSION_KEY, content);
    localStorage.setItem(DRAFT_KEY, content);
  });
</script>

Spiegazione

Il codice sopra mostra un approccio molto pratico: usare SessionStorage per mantenere il contenuto durante la sessione corrente e LocalStorage per conservarlo anche dopo la chiusura del browser.

1. Recupero iniziale dei dati

All’avvio della pagina, il codice controlla prima sessionStorage. Se trova una bozza, la mostra subito nel textarea. Se non c’è nulla nella sessione, prova con localStorage. Questa priorità è utile perché la sessione rappresenta il lavoro più recente nella scheda corrente.

2. Salvataggio automatico

Ogni volta che l’utente digita, viene avviato un piccolo debounce con setTimeout. Questo evita di scrivere nello storage ad ogni singolo carattere e riduce operazioni inutili. Dopo 300 millisecondi di inattività, il contenuto viene salvato in entrambi gli storage.

Perché usare entrambi?

• SessionStorage è utile se l’utente ricarica la pagina o naviga nella stessa scheda.
• LocalStorage è utile se il browser viene chiuso e riaperto in seguito.

3. Salvataggio manuale

Il pulsante “Salva subito” è una buona aggiunta UX. Anche se il salvataggio automatico è comodo, alcuni utenti preferiscono confermare esplicitamente l’azione. In questo esempio il bottone salva immediatamente il contenuto, senza attendere il timeout del debounce.

4. Cancellazione controllata

Il pulsante “Cancella bozza” rimuove sia il contenuto visibile sia i dati memorizzati. È importante sincronizzare sempre l’interfaccia con lo storage, altrimenti si rischia di mostrare dati vecchi o incoerenti.

5. Salvataggio prima della chiusura

L’evento beforeunload tenta di salvare un’ultima volta i dati prima che la pagina venga chiusa. Non sostituisce il salvataggio automatico, ma aggiunge un livello di sicurezza in più.

Best practice

Usare LocalStorage e SessionStorage è semplice, ma in applicazioni reali conviene seguire alcune regole per evitare problemi.

• Non salvare dati sensibili: password, token privati o informazioni personali delicate non dovrebbero stare nello storage del browser.
• Usa chiavi chiare e coerenti: ad esempio articleDraft è molto più leggibile di data1.
• Gestisci il formato dei dati: se devi salvare oggetti complessi, usa JSON.stringify() e JSON.parse().
• Limita la frequenza di scrittura: con debounce o throttle eviti aggiornamenti troppo frequenti.
• Pulisci i dati obsoleti: se la bozza viene pubblicata o inviata, rimuovi subito il contenuto dallo storage.
• Prevedi fallback: alcuni browser o contesti privati possono limitare l’uso dello storage.

Un altro consiglio importante è non usare LocalStorage come se fosse un database. È perfetto per piccole quantità di dati lato client, ma non per strutture complesse o per sincronizzazione tra dispositivi. Se la bozza deve essere accessibile ovunque, allora serve un salvataggio lato server.

Riepilogo

In questo tutorial abbiamo visto come usare LocalStorage e SessionStorage per salvare una bozza di testo in modo pratico e affidabile. La strategia è semplice ma efficace:

• SessionStorage conserva il contenuto durante la sessione corrente.
• LocalStorage mantiene i dati anche dopo la chiusura del browser.
• Il salvataggio automatico riduce il rischio di perdita della bozza.
• Un pulsante di salvataggio manuale e uno di cancellazione migliorano l’esperienza utente.

Questo approccio è ideale per editor, note rapide, commenti lunghi, descrizioni di prodotti o qualsiasi input testuale che l’utente non vuole perdere. Con poche righe di JavaScript puoi ottenere un comportamento molto utile e professionale.

Approfondisci con risorse ufficiali

• MDN Web Docs - Window.localStorage
• MDN Web Docs - Window.sessionStorage
• MDN Web Docs - Web Storage API
• MDN Web Docs - StorageEvent
• MDN Web Docs - beforeunload event

Le documentazioni ufficiali sono il riferimento migliore per conoscere limiti, compatibilità e dettagli avanzati dell’API Web Storage.