Hoe IndexedDB als een database te gebruiken

IndexedDB is een NoSQL-database aan de clientzijde waarmee u gestructureerde gegevens kunt opslaan en ophalen in de webbrowser van een gebruiker.

IndexedDB biedt verschillende voordelen, zoals een groter geheugen en offline opslag en ophalen van gegevens ten opzichte van andere opslagopties, zoals localStorage. Hier leer je hoe je IndexedDB als database kunt gebruiken.

Uw database opzetten

Om de database te maken, moet u een open verzoek maken met behulp van IndexedDB's open methode. De open methode retourneert een IDBOpenDBRequest voorwerp. Dit object geeft toegang tot de succes, fout, En geüpgradedgebeurtenissen uitgezonden van de open operatie.

De open methode heeft twee argumenten nodig: een naam en een optioneel versienummer. Het naamargument vertegenwoordigt de naam van uw database. Het versienummer geeft de versie van de database aan waarmee uw toepassing verwacht te werken. De standaardwaarde is nul.

Ga als volgt te werk om een ​​open verzoek te maken:

const openRequest = geïndexeerdeDB.open("gebruikersdb", 1);

Nadat u het open verzoek hebt gemaakt, moet u luisteren en de gebeurtenissen afhandelen op het geretourneerde object.

De succes gebeurtenis vindt plaats wanneer u de database met succes hebt gemaakt. Eenmaal uitgezonden, krijgt u toegang tot uw database-object via gebeurtenis.doel.resultaat:

openRequest.onsucces = functie (evenement) {
const db = gebeurtenis.doel.resultaat;
troosten.log("Database aangemaakt", db);
};

In het bovenstaande voorbeeld wordt een succesgebeurtenis verwerkt door het databaseobject te loggen.

De fout gebeurtenis treedt op als IndexedDB een probleem tegenkomt tijdens het maken van de database. U kunt het afhandelen door de fout op de console te loggen of een ander te gebruiken methoden voor foutafhandeling:

openRequest.onerror = functie (evenement) {
// ...
};

De geüpgraded gebeurtenis vindt plaats wanneer u de database voor het eerst maakt of wanneer u de versie ervan bijwerkt. Het vuurt maar één keer, waardoor het de ideale plek is om een ​​objectopslag te maken.

Een objectopslag maken

Een objectarchief is vergelijkbaar met een tabel in relationele databases aan de serverzijde. U kunt een objectarchief gebruiken om sleutel-waardeparen op te slaan.

U moet objectarchieven maken als reactie op de geüpgraded evenement. Deze gebeurtenis wordt geactiveerd wanneer u een nieuwe versie van de database maakt of een bestaande versie bijwerkt. Dit zorgt ervoor dat de database correct en up-to-date is geconfigureerd voordat u gegevens toevoegt.

U kunt een objectarchief maken met behulp van de createObjectStore methode, die u kunt openen op een referentie van uw database. Deze methode gebruikt de naam van het objectarchief en een configuratieobject als argumenten.

In het configuratieobject moet u een primaire sleutel definiëren. U kunt een primaire sleutel definiëren door een sleutelpad te definiëren. Dit is een eigenschap die altijd bestaat en een unieke waarde bevat. U kunt ook een sleutelgenerator gebruiken door de keyPath eigendom aan “ID kaart" en de autoIncrement eigendom aan WAAR in uw configuratieobject.

Bijvoorbeeld:

openRequest.onupgradeneeded = functie (evenement) {
const db = gebeurtenis.doel.resultaat;
// Maak een objectarchief
const userObjectStore = db.createObjectStore("gebruikerswinkel", {
 sleutelPath: "ID kaart",
 autoIncrement: WAAR,
 });
}

Dit voorbeeld maakt een objectarchief met de naam "userStore" in uw database en stelt de primaire sleutel in op een automatisch oplopende id.

Indexen definiëren

In IndexedDB is een index een manier om gegevens efficiënter te organiseren en op te halen. Hiermee kunt u het objectarchief doorzoeken en sorteren op basis van de geïndexeerde eigenschappen.

Om een ​​index op een objectarchief te definiëren, gebruikt u de createIndex() methode van een objectopslagobject. Deze methode gebruikt een indexnaam, een eigenschapsnaam en een configuratieobject als argumenten:

userObjectStore.createIndex("naam", "naam", { uniek: vals });
userObjectStore.createIndex("e-mail", "e-mail", { uniek: WAAR });

Dit codeblok hierboven definieert twee indexen, "naam" en "e-mail" op de userObjectStore. De "naam"-index is niet uniek, wat betekent dat meerdere objecten dezelfde naamwaarde kunnen hebben, terwijl de "e-mail"-index uniek is, zodat geen twee objecten dezelfde e-mailwaarde kunnen hebben.

Hier is een volledig voorbeeld van hoe u een geüpgraded evenement:

openRequest.onupgradeneeded = functie (evenement) {
const db = gebeurtenis.doel.resultaat;
// Maak een objectarchief
const userObjectStore = db.createObjectStore("gebruikerswinkel", {
 sleutelPath: "ID kaart",
 autoIncrement: WAAR,
 }); 
// Maak indexen
 userObjectStore.createIndex("naam", "naam", { uniek: vals });
 userObjectStore.createIndex("e-mail", "e-mail", { uniek: WAAR });
};

Gegevens toevoegen aan IndexedDB

Een transactie in IndexedDB is een manier om meerdere lees- en schrijfbewerkingen in één bewerking te groeperen. Om gegevensconsistentie en -integriteit te garanderen, draait IndexedDB alle bewerkingen terug als een van de bewerkingen binnen een transactie mislukt.

Om gegevens toe te voegen aan een IndexedDB-database, moet u een transactie maken in de objectopslag waaraan u de gegevens wilt toevoegen en vervolgens de toevoegen() methode op de transactie om de gegevens toe te voegen.

U kunt een transactie aanmaken door te bellen naar de transactie methode op uw database-object. Deze methode heeft twee argumenten nodig: de naam (namen) van uw datastore en de modus van de transactie, wat kan zijn alleen lezen (standaard) of lezen schrijven.

Bel dan de objectWinkel() methode op de transactie en geef de naam door van het objectarchief waaraan u gegevens wilt toevoegen. Deze methode retourneert een verwijzing naar het objectarchief.

Bel ten slotte de toevoegen() methode op de objectopslag en geef de gegevens door die u wilt toevoegen:

const addUserData = (gebruikersgegevens, db) => {
// Open een transactie
const transactie = db.transactie("gebruikerswinkel", "lezen schrijven");
// Voeg gegevens toe aan het objectarchief
const userObjectStore = transactie.objectStore("gebruikerswinkel");
// Doe een verzoek om userData toe te voegen
const verzoek = userObjectStore.add (userData);
// Behandel een succesevenement
 request.onsucces = functie (evenement) {
//...
 };
// Behandel een fout
 request.onerror = functie (evenement) {
//...
 };
};

Deze functie creëert een transactie met het objectarchief "userStore" en stelt de modus in op "readwrite". Vervolgens haalt het de objectopslag op en voegt het toe gebruikersgegevens ernaartoe met behulp van de toevoegen methode.

Gegevens ophalen uit IndexedDB

Om gegevens op te halen uit een IndexedDB-database, moet u een transactie maken in de objectopslag waaruit u de gegevens wilt ophalen en vervolgens de krijgen() of alles krijgen() methode op de transactie om de gegevens op te halen, afhankelijk van de hoeveelheid gegevens die u wilt ophalen.

De krijgen() methode neemt een waarde voor de primaire sleutel van het object dat u wilt ophalen en retourneert het object met de bijbehorende sleutel uit uw objectarchief.

De alles krijgen() methode retourneert alle gegevens in een objectarchief. Het neemt ook een optionele beperking als argument en retourneert alle overeenkomende gegevens uit de winkel.

const getUserData = (idd, db) => {
const transactie = db.transactie("gebruikerswinkel", "alleen lezen");
const userObjectStore = transactie.objectStore("gebruikerswinkel");
// Doe een verzoek om de gegevens op te halen
const verzoek = userObjectStore.get (id);
 request.onsucces = functie (evenement) {
troosten.log (verzoek.resultaat);
 };
 request.onerror = functie (evenement) {
// Behandel fout
 };
};

Deze functie maakt een transactie aan met de objectopslag "userStore" en stelt de modus in op "alleen-lezen". Vervolgens haalt het gebruikersgegevens met de overeenkomende id op uit de objectopslag.

Gegevens bijwerken met IndexedDB

Om gegevens in IndexedDB bij te werken, moet u een transactie maken met de "readwrite" -modus. Ga door met het ophalen van het object dat u wilt bijwerken met behulp van de krijgen() methode. Wijzig vervolgens het object en roep het neerzetten() methode op het objectarchief om het bijgewerkte object terug in de database op te slaan.

const updateUserData = (id, gebruikersgegevens, db) => {
const transactie = db.transactie("gebruikerswinkel", "lezen schrijven");
const userObjectStore = transactie.objectStore("gebruikerswinkel");
// Doe een verzoek om de gegevens op te halen
const getRequest = userObjectStore.get (id);
// Behandel een succesevenement
 getRequest.onsuccess = functie (evenement) {
// Haal de oude gebruikersgegevens op
const gebruiker = gebeurtenis.doel.resultaat;
// Werk de gebruikersgegevens bij
 gebruikersnaam.naam = gebruikersnaam.naam;
 gebruiker.email = gebruikersgegevens.email;
// Doe een verzoek om de gegevens bij te werken
const putRequest = userObjectStore.put (gebruiker);
 putRequest.onsucces = functie (evenement) {
// Omgaan met succes
 };
 putRequest.onerror = functie (evenement) {
// Behandel fout
 };
 };
 getRequest.onerror = functie (evenement) {
// Behandel fout
 };
};

Deze functie creëert een transactie om de gegevens van uw database op te halen en bij te werken.

Gegevens verwijderen uit IndexedDB

Om gegevens uit IndexedDB te verwijderen, moet u een transactie maken met de "readwrite" -modus. Bel dan de verwijderen() methode op het objectarchief om het object uit de database te verwijderen:

const deleteUserData = (idd, db) => {
const transactie = db.transactie("gebruikerswinkel", "lezen schrijven");
const userObjectStore = transactie.objectStore("gebruikerswinkel");
// Doe een verzoek om de gegevens te verwijderen
const verzoek = userObjectStore.delete (id);
 request.onsucces = functie (evenement) {
// Omgaan met succes
 };
 request.onerror = functie (evenement) {
// Behandel fout
 };
};

Deze functie maakt een transactie aan die de gegevens met de bijbehorende id uit uw objectarchief verwijdert.

Moet u IndexedDB of localStorage gebruiken?

De keuze tussen IndexedDB en andere client-side databases, zoals localStorage, hangt af van de vereisten van uw toepassing. Gebruik localStorage voor eenvoudige opslag van kleine hoeveelheden gegevens. Kies IndexedDB voor grote gestructureerde gegevenssets die moeten worden bevraagd en gefilterd.