sessionStorage, IndexedDB e scelta dell'API giusta

sessionStorage espone esattamente gli stessi metodi di localStorage, ma la sua durata è legata alla scheda. Quando la scheda o la finestra viene chiusa, i dati vengono cancellati automaticamente.

È inoltre isolato per scheda, quindi due schede non condividono i dati di sessionStorage.

sessionStorage è ideale per una procedura guidata a più passaggi, quando si desidera conservare i progressi tra i ricaricamenti durante la sessione, ma eliminarli alla chiusura della scheda.

L'utente può ricaricare la pagina durante la compilazione senza perdere i dati inseriti, ma nulla rimane dopo aver terminato o abbandonato la procedura.

IndexedDB è un database asincrono e transazionale integrato nel browser. Può memorizzare molti più dati del limite di 5 MB di localStorage e gestisce oggetti strutturati, array e persino dati binari.

Essendo asincrono, non blocca il thread principale come fa localStorage.

L'API IndexedDB grezza è verbosa e basata su eventi, quindi librerie come idb-keyval la avvolgono in semplici funzioni basate su Promise, come get, set e del.

Si ottiene così un'ergonomia simile a localStorage, con la capacità e il comportamento asincrono di IndexedDB.

Poiché IndexedDB può memorizzare valori Blob e ArrayBuffer, è ideale per memorizzare nella cache immagini, audio, file scaricati o risorse offline.

Questi dati supererebbero rapidamente i limiti di localStorage e dovrebbero essere convertiti in stringhe, cosa che IndexedDB evita.

L'API Cache, spesso usata con i service worker, memorizza interi oggetti HTTP Response indicizzati per richiesta. È progettata appositamente per la memorizzazione nella cache delle risposte di rete in applicazioni offline-first.

La si utilizza per fornire risorse e risposte delle API senza accedere alla rete quando si è offline.

localStorage persiste permanentemente finché non viene cancellato, sessionStorage dura solo per la sessione della scheda, IndexedDB persiste permanentemente e i cookie hanno una scadenza configurabile tramite i relativi attributi.

Associare la durata necessaria al sistema di archiviazione corretto evita sorprese su quando i dati scompaiono.

localStorage e sessionStorage sono limitati a circa 5 MB, mentre i cookie hanno una capacità di circa 4 KB ciascuno e IndexedDB può utilizzare centinaia di megabyte o più, a seconda del dispositivo e del browser.

Per qualsiasi quantità di dati significativa, IndexedDB è l'unica opzione pratica nel browser.

localStorage, sessionStorage e i cookie sono sincroni e bloccano il thread principale durante l'accesso. IndexedDB e la Cache API sono asincroni e basati su Promise.

L'accesso asincrono mantiene reattiva l'interfaccia utente anche durante la lettura o la scrittura di quantità di dati maggiori.

Utilizzi cookie httpOnly per i token di autenticazione, in modo che gli script non possano leggerli; localStorage per le preferenze persistenti di piccole dimensioni; IndexedDB per file di grandi dimensioni e dati offline complessi; infine, sessionStorage per bozze temporanee all'interno di una scheda.

Scelga il sistema di archiviazione in base alla sensibilità, alle dimensioni e alla durata dei dati.

Non esiste un'unica API di archiviazione migliore delle altre: ciascuna comporta compromessi in termini di capacità, persistenza, comportamento sincrono e sicurezza. Conoscendone le differenze, può scegliere consapevolmente.

Un'applicazione tipica ne utilizza diverse: i cookie per l'autenticazione, localStorage per le preferenze e IndexedDB per le risorse offline.

Ha confrontato sessionStorage, localStorage, IndexedDB, i cookie e la Cache API in termini di persistenza, capacità, comportamento sincrono e sicurezza.

Ha imparato a scegliere in base al caso d'uso: i cookie per l'autenticazione, localStorage per le preferenze di piccole dimensioni, IndexedDB per dati grandi o complessi e sessionStorage per bozze limitate alla scheda.