# Parte 2: Lo storage locale

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.

```javascript
// 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);
```

2. **Utilizzo di `IndexedDB`**:
   * Implementa una funzione per salvare lo stesso oggetto in `IndexedDB`.
   * Recupera e stampa i dati in console al caricamento della pagina.

```javascript
// 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.