# 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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://learn.ziomark.xyz/javascript/parte-2-lo-storage-locale.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.