Parte 2: Lo storage locale

Ecco la seconda lezione sul corso di JavaScript focalizzata su localStorage e IndexedDB. Questa lezione copre le basi di questi due importanti meccanismi di storage sul lato client-

Benvenuti alla seconda lezione del nostro corso di JavaScript su ZioMark's HUB. Oggi, esploreremo due delle opzioni più comuni per la memorizzazione di dati lato client: localStorage e IndexedDB. Queste tecnologie permettono di salvare dati direttamente nel browser dell'utente, migliorando le prestazioni dell'applicazione e fornendo una persistenza dei dati anche quando la connessione a internet non è disponibile.

Cosa è localStorage?

localStorage è una funzionalità che permette ai siti web di salvare coppie chiave-valore nel browser di un utente. I dati salvati con localStorage sono persistenti fino a quando non vengono esplicitamente cancellati attraverso il codice o pulendo la cache del browser.

Caratteristiche di localStorage:

• Semplicità di uso: Interfaccia semplice per salvare, leggere e rimuovere dati.

• Capacità: Limitato a circa 5MB per dominio.

• Sincronicità: Le operazioni di localStorage sono sincrone e possono potenzialmente bloccare il thread principale se i dati sono grandi.

Quando usare localStorage?

localStorage è ideale per piccole quantità di dati che non richiedono operazioni complesse e possono essere gestite in modo sincrono. È ottimo per salvare preferenze utente, stati di interfaccia e altri dati di piccole dimensioni.

Cosa è IndexedDB?

IndexedDB è un database NoSQL lato client che permette di immagazzinare quantità molto più grandi di dati strutturati, inclusi file/blobs. È una soluzione potente per applicazioni web che necessitano di lavorare con una grande quantità di dati offline.

Caratteristiche di IndexedDB:

• Capacità di storage maggiore: Non ha un limite fisso, ma è influenzato dalla capacità del dispositivo.

• Supporto per transazioni: Permette operazioni complesse su più record.

• Asincrono: Le operazioni sono asincrone e non bloccano il thread dell'interfaccia utente.

Quando usare IndexedDB?

IndexedDB è adatto per applicazioni che necessitano di gestire una grande quantità di dati o che richiedono operazioni su database come ricerca, aggiornamento e sincronizzazione di dati complessi.

Esercizio Pratico: Salvare e Recuperare Dati

Ora che abbiamo esplorato localStorage e IndexedDB, proviamo a utilizzarli con un semplice esercizio.

Obiettivo:

• Salvare un oggetto dati in localStorage e IndexedDB.

• Recuperare i dati al ricarico della pagina e visualizzarli in console.

Passaggi dell'Esercizio:

1. Utilizzo di localStorage:

   • Salva un oggetto dati (es. { username: 'ziomark', status: 'active' }).

   • Al caricamento della pagina, verifica se il dato esiste e stampalo in console.

// Salvataggio dei dati in localStorage
localStorage.setItem('userData', JSON.stringify({ username: 'ziomark', status: 'active' }));

// Recupero dei dati da localStorage
const userData = JSON.parse(localStorage.getItem('userData'));
console.log(userData);

1. Utilizzo di IndexedDB:

   • Implementa una funzione per salvare lo stesso oggetto in IndexedDB.

   • Recupera e stampa i dati in console al caricamento della pagina.

// Creazione di una funzione per inizializzare IndexedDB
function initDb() {
    let db;
    const request = indexedDB.open('myDatabase', 1);

    request.onupgradeneeded = function(event) {
        db = event.target.result;
        db.createObjectStore('users', { keyPath: 'id' });
    };

    request.onsuccess = function(event) {
        db = event.target.result;
        // Salvataggio dei dati
        const transaction = db

.transaction(['users'], 'readwrite');
        const store = transaction.objectStore('users');
        store.add({ id: 1, username: 'ziomark', status: 'active' });

        // Recupero dei dati
        const getRequest = store.get(1);
        getRequest.onsuccess = function() {
            console.log(getRequest.result);
        };
    };

    request.onerror = function(event) {
        console.error('Database error: ' + event.target.errorCode);
    };
}

// Esegui questa funzione al caricamento della pagina
initDb();

Conclusione

Con questa lezione, hai imparato le basi di localStorage e IndexedDB e come possono essere utilizzati per gestire dati persistenti nel browser. Continua a esplorare queste tecnologie per migliorare le tue applicazioni web.