Come utilizzare IndexedDB come database

IndexedDB è un database NoSQL lato client che consente di archiviare e recuperare dati strutturati all'interno del browser Web di un utente.

IndexedDB offre diversi vantaggi, come una memoria più grande e l'archiviazione e il recupero dei dati offline rispetto ad altre opzioni di archiviazione, come localStorage. Qui imparerai come utilizzare IndexedDB come database.

Configurazione del database

Per creare il database, devi creare una richiesta aperta utilizzando IndexedDB aprire metodo. IL aprire metodo restituisce un IDBOpenDBRequest oggetto. Questo oggetto fornisce l'accesso a successo, errore, E aggiornamento necessarioeventi emessi dall'operazione aperta.

IL aprire Il metodo accetta due argomenti: un nome e un numero di versione facoltativo. L'argomento name rappresenta il nome del database. Il numero di versione specifica la versione del database con cui l'applicazione prevede di funzionare. Il valore di default è zero.

Ecco come creare una richiesta aperta:

cost openRequest = indexedDB.open("userdb", 1);

Dopo aver creato la richiesta aperta, devi ascoltare e gestire gli eventi sull'oggetto restituito.

IL successo L'evento si verifica quando si crea correttamente il database. Una volta emesso, ottieni l'accesso al tuo oggetto di database tramite evento.target.risultato:

openRequest.onsuccess = funzione (evento) {
cost db = evento.obiettivo.risultato;
consolare.tronco d'albero("Database creato", db);
};

L'esempio precedente gestisce un evento riuscito registrando l'oggetto database.

IL errore L'evento si verifica se IndexedDB incontra un problema durante la creazione del database. Puoi gestirlo registrando l'errore nella console o utilizzando altro metodi di gestione degli errori:

openRequest.onerror = funzione (evento) {
// ...
};

IL aggiornamento necessario L'evento si verifica quando crei il database per la prima volta o quando ne aggiorni la versione. Si accende una sola volta, rendendolo il luogo ideale per creare un negozio di oggetti.

Creazione di un archivio oggetti

Un archivio oggetti è simile a una tabella nei database relazionali lato server. È possibile utilizzare un archivio oggetti per archiviare coppie chiave-valore.

È necessario creare archivi di oggetti in risposta al aggiornamento necessario evento. Questo evento si attiva quando si crea una nuova versione del database o si aggiorna una versione esistente. Ciò garantisce che il database sia configurato correttamente e aggiornato prima di aggiungere dati.

È possibile creare un archivio oggetti utilizzando il file createObjectStore metodo, a cui puoi accedere su un riferimento del tuo database. Questo metodo accetta come argomenti il ​​nome dell'archivio oggetti e un oggetto di configurazione.

Nell'oggetto di configurazione, devi definire una chiave primaria. È possibile definire una chiave primaria definendo un percorso chiave, ovvero una proprietà che esiste sempre e contiene un valore univoco. In alternativa, puoi utilizzare un generatore di chiavi impostando il file keyPath proprietà a “id" e il Incremento automatico proprietà a VERO nel tuo oggetto di configurazione.

Per esempio:

openRequest.onupgradeneeded = funzione (evento) {
cost db = evento.obiettivo.risultato;
// Crea un archivio oggetti
cost userObjectStore = db.createObjectStore("archivio utente", {
 percorso chiave: "id",
 Incremento automatico: VERO,
 });
}

Questo esempio crea un archivio oggetti denominato "userStore" nel database e ne imposta la chiave primaria su un ID con incremento automatico.

Definizione di indici

In IndexedDB, un indice è un modo per organizzare e recuperare i dati in modo più efficiente. Ciò consente di eseguire ricerche nell'archivio oggetti e di ordinarlo in base alle proprietà indicizzate.

Per definire un indice su un archivio oggetti, utilizzare il file creaIndice() metodo di un oggetto archivio oggetti. Questo metodo accetta come argomenti un nome di indice, un nome di proprietà e un oggetto di configurazione:

userObjectStore.createIndex("nome", "nome", { unico: falso });
userObjectStore.createIndex("e-mail", "e-mail", { unico: VERO });

Questo blocco di codice sopra definisce due indici, "name" e "email" sul file userObjectStore. L'indice "name" non è univoco, il che significa che più oggetti possono avere lo stesso valore del nome, mentre l'indice "email" è univoco, assicurando che due oggetti non possano avere lo stesso valore email.

Ecco un esempio completo di come puoi gestire un file aggiornamento necessario evento:

openRequest.onupgradeneeded = funzione (evento) {
cost db = evento.obiettivo.risultato;
// Crea un archivio oggetti
cost userObjectStore = db.createObjectStore("archivio utente", {
 percorso chiave: "id",
 Incremento automatico: VERO,
 }); 
// Crea indici
 userObjectStore.createIndex("nome", "nome", { unico: falso });
 userObjectStore.createIndex("e-mail", "e-mail", { unico: VERO });
};

Aggiunta di dati a IndexedDB

Una transazione in IndexedDB è un modo per raggruppare più operazioni di lettura e scrittura in un'unica operazione. Per garantire la coerenza e l'integrità dei dati, se una delle operazioni all'interno di una transazione fallisce, IndexedDB esegue il rollback di tutte le operazioni.

Per aggiungere dati a un database IndexedDB, è necessario creare una transazione nell'archivio oggetti in cui si desidera aggiungere i dati e quindi utilizzare il aggiungere() metodo sulla transazione per aggiungere i dati.

Puoi creare una transazione chiamando il metodo transazione metodo sull'oggetto del database. Questo metodo accetta due argomenti: il nome (i) del tuo datastore e la modalità della transazione, che può essere sola lettura (predefinito) o leggere scrivere.

Quindi, chiama il oggettoStore() metodo sulla transazione e passare il nome dell'archivio oggetti a cui si desidera aggiungere i dati. Questo metodo restituisce un riferimento all'archivio oggetti.

Infine chiama il aggiungere() metodo sull'archivio oggetti e passare i dati che si desidera aggiungere:

cost addUserData = (userData, db) => {
// Apre una transazione
cost transazione = db.transazione("archivio utente", "leggere scrivere");
// Aggiunge dati all'archivio oggetti
cost userObjectStore = transazione.objectStore("archivio utente");
// Effettua una richiesta per aggiungere userData
cost richiesta = userObjectStore.add (userData);
// Gestisci un evento di successo
 request.onsuccess = funzione (evento) {
//...
 };
// Gestisci un errore
 richiesta.onerror = funzione (evento) {
//...
 };
};

Questa funzione crea una transazione con l'archivio oggetti "userStore" e imposta la modalità su "readwrite". Quindi, ottiene l'archivio oggetti e aggiunge il file dati utente ad esso utilizzando il aggiungere metodo.

Recupero di dati da IndexedDB

Per recuperare i dati da un database IndexedDB, è necessario creare una transazione nell'archivio oggetti da cui si desidera recuperare i dati e quindi utilizzare il Ottenere() O prendi tutto() metodo sulla transazione per recuperare i dati a seconda della quantità di dati che si desidera recuperare.

IL Ottenere() Il metodo accetta un valore per la chiave primaria dell'oggetto che si desidera recuperare e restituisce l'oggetto con la chiave corrispondente dall'archivio oggetti.

IL prendi tutto() Il metodo restituisce tutti i dati in un archivio oggetti. Prende anche un vincolo facoltativo come argomento e restituisce tutti i dati corrispondenti dall'archivio.

cost getUserData = (id, db) => {
cost transazione = db.transazione("archivio utente", "sola lettura");
cost userObjectStore = transazione.objectStore("archivio utente");
// Effettua una richiesta per ottenere i dati
cost richiesta = userObjectStore.get (id);
 request.onsuccess = funzione (evento) {
consolare.log (richiesta.risultato);
 };
 richiesta.onerror = funzione (evento) {
// Errore di gestione
 };
};

Questa funzione crea una transazione con l'object store "userStore" e imposta la modalità su "readonly". Quindi recupera i dati utente con l'ID corrispondente dall'archivio oggetti.

Aggiornamento dei dati con IndexedDB

Per aggiornare i dati in IndexedDB, è necessario creare una transazione con la modalità "readwrite". Proseguire recuperando l'oggetto che si desidera aggiornare utilizzando il file Ottenere() metodo. Quindi modificare l'oggetto e chiamare il file Mettere() metodo nell'archivio oggetti per salvare nuovamente l'oggetto aggiornato nel database.

cost updateUserData = (id, userData, db) => {
cost transazione = db.transazione("archivio utente", "leggere scrivere");
cost userObjectStore = transazione.objectStore("archivio utente");
// Effettua una richiesta per ottenere i dati
cost getRequest = userObjectStore.get (id);
// Gestisci un evento di successo
 getRequest.onsuccess = funzione (evento) {
// Recupera i vecchi dati utente
cost utente = evento.target.risultato;
// Aggiorna i dati dell'utente
 user.name = userData.name;
 user.email = userData.email;
// Effettua una richiesta per aggiornare i dati
cost putRequest = userObjectStore.put (utente);
 putRequest.onsuccess = funzione (evento) {
// Gestisci il successo
 };
 putRequest.onerror = funzione (evento) {
// Errore di gestione
 };
 };
 getRequest.onerror = funzione (evento) {
// Errore di gestione
 };
};

Questa funzione crea una transazione per ottenere e aggiornare i dati del tuo database.

Eliminazione di dati da IndexedDB

Per eliminare i dati da IndexedDB, è necessario creare una transazione con la modalità "readwrite". Poi chiama il eliminare() metodo sull'archivio oggetti per rimuovere l'oggetto dal database:

cost deleteUserData = (id, db) => {
cost transazione = db.transazione("archivio utente", "leggere scrivere");
cost userObjectStore = transazione.objectStore("archivio utente");
// Effettua una richiesta per eliminare i dati
cost richiesta = userObjectStore.delete (id);
 request.onsuccess = funzione (evento) {
// Gestisci il successo
 };
 richiesta.onerror = funzione (evento) {
// Errore di gestione
 };
};

Questa funzione crea una transazione che elimina i dati con l'id corrispondente dal tuo archivio oggetti.

Dovresti usare IndexedDB o localStorage?

La scelta tra IndexedDB e altri database lato client, come localStorage, dipende dai requisiti dell'applicazione. Utilizza localStorage per l'archiviazione semplice di piccole quantità di dati. Scegli IndexedDB per set di dati strutturati di grandi dimensioni che richiedono query e filtri.