Mange nettapper må bruke en database for å lagre brukerdetaljer eller preferanser. Men visste du at det er en innebygd database i alle moderne nettlesere?

IndexedDB er en klient-side, NoSQL-database som lar deg lagre og hente strukturerte data i en brukers nettleser.

IndexedDB gir flere fordeler, for eksempel et større minne og offline datalagring og gjenfinning fremfor andre lagringsalternativer, for eksempel localStorage. Her lærer du hvordan du bruker IndexedDB som database.

Sette opp databasen din

For å opprette databasen, må du opprette en åpen forespørsel ved å bruke IndexedDB åpen metode. De åpen metoden returnerer en IDBOpenDBRequest gjenstand. Dette objektet gir tilgang til suksess, feil, og oppgradereshendelser som sendes ut fra den åpne operasjonen.

De åpen metoden tar to argumenter: et navn og et valgfritt versjonsnummer. Navneargumentet representerer navnet på databasen din. Versjonsnummeret spesifiserer versjonen av databasen som programmet forventer å fungere med. Standardverdien er null.

Slik oppretter du en åpen forespørsel:

konst openRequest = indexedDB.open("usersdb", 1);

Etter å ha opprettet den åpne forespørselen, må du lytte og håndtere hendelsene på den returnerte gjenstanden.

De suksess hendelsen oppstår når du oppretter databasen. Når det er sendt ut, får du tilgang til databaseobjektet ditt gjennom event.target.result:

openRequest.onsuccess = funksjon (begivenhet) {
konst db = event.target.result;
konsoll.Logg("Database opprettet", db);
};

Eksemplet ovenfor håndterer en suksesshendelse ved å logge databaseobjektet.

De feil hendelsen oppstår hvis IndexedDB støter på et problem mens du oppretter databasen. Du kan håndtere det ved å logge feilen til konsollen eller bruke en annen feilhåndteringsmetoder:

openRequest.onerror = funksjon (begivenhet) {
// ...
};

De oppgraderes hendelsen oppstår når du oppretter databasen for første gang eller når du oppdaterer versjonen. Den avfyres bare én gang, noe som gjør den til det ideelle stedet å lage en gjenstandsbutikk.

Opprette et objektlager

Et objektlager ligner på en tabell i relasjonsdatabaser på serversiden. Du kan bruke et objektlager til å lagre nøkkelverdi-par.

Du bør opprette objektlagre som svar på oppgraderes begivenhet. Denne hendelsen utløses når du oppretter en ny versjon av databasen eller oppgraderer en eksisterende versjon. Dette sikrer at databasen er riktig konfigurert og oppdatert før du legger til data.

Du kan opprette et objektlager ved å bruke createObjectStore metode, som du kan få tilgang til på en referanse til databasen. Denne metoden tar objektlagerets navn og et konfigurasjonsobjekt som argumenter.

I konfigurasjonsobjektet må du definere en primærnøkkel. Du kan definere en primærnøkkel ved å definere en nøkkelbane, som er en egenskap som alltid eksisterer og inneholder en unik verdi. Alternativt kan du bruke en nøkkelgenerator ved å stille inn keyPath eiendom til "id" og autoInkrement eiendom til ekte i konfigurasjonsobjektet ditt.

For eksempel:

openRequest.onupgradeneeded = funksjon (begivenhet) {
konst db = event.target.result;
// Opprett et objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoInkrement: ekte,
 });
}

Dette eksemplet oppretter et objektlager kalt "userStore" i databasen din og setter primærnøkkelen til en auto-inkrementerende id.

Definere indekser

I IndexedDB er en indeks en måte å organisere og hente data mer effektivt på. Dette lar deg søke i objektlageret og sortere det basert på de indekserte egenskapene.

For å definere en indeks på et objektlager, bruk createIndex() metode for et objektlagerobjekt. Denne metoden tar et indeksnavn, et egenskapsnavn og et konfigurasjonsobjekt som argumenter:

userObjectStore.createIndex("Navn", "Navn", { unik: falsk });
userObjectStore.createIndex("e-post", "e-post", { unik: ekte });

Denne kodeblokken ovenfor definerer to indekser, "navn" og "e-post" på userObjectStore. "Navn"-indeksen er ikke-unik, noe som betyr at flere objekter kan ha samme navneverdi, mens "e-post"-indeksen er unik, noe som sikrer at ikke to objekter kan ha samme e-postverdi.

Her er et fullstendig eksempel på hvordan du kan håndtere en oppgraderes begivenhet:

openRequest.onupgradeneeded = funksjon (begivenhet) {
konst db = event.target.result;
// Opprett et objektlager
konst userObjectStore = db.createObjectStore("userStore", {
 keyPath: "id",
 autoInkrement: ekte,
 }); 
// Lag indekser
 userObjectStore.createIndex("Navn", "Navn", { unik: falsk });
 userObjectStore.createIndex("e-post", "e-post", { unik: ekte });
};

Legge til data til IndexedDB

En transaksjon i IndexedDB er en måte å gruppere flere lese- og skriveoperasjoner i en enkelt operasjon. For å sikre datakonsistens og integritet, hvis en av operasjonene i en transaksjon mislykkes, ruller IndexedDB tilbake alle operasjonene.

For å legge til data til en IndexedDB-database, må du opprette en transaksjon på objektlageret du vil legge til dataene og deretter bruke Legg til() metode på transaksjonen for å legge til dataene.

Du kan opprette en transaksjon ved å ringe transaksjon metode på databaseobjektet ditt. Denne metoden tar to argumenter: Navnet på datalageret ditt og modusen for transaksjonen, som kan være skrivebeskyttet (standard) eller Les Skriv.

Deretter ringer du objectStore() metoden på transaksjonen og send navnet på objektlageret du vil legge til data til. Denne metoden returnerer en referanse til objektlageret.

Ring til slutt Legg til() metode på objektlageret og send inn dataene du vil legge til:

konst addUserData = (brukerdata, db) => {
// Åpne en transaksjon
konst transaksjon = db.transaction("userStore", "Les Skriv");
// Legg til data i objektlageret
konst userObjectStore = transaksjon.objectStore("userStore");


// Lag en forespørsel om å legge til brukerdata
konst request = userObjectStore.add (brukerData);


// Håndtere en suksesshendelse
 request.onsuccess = funksjon (begivenhet) {
//...
 };
// Håndter en feil
 request.onerror = funksjon (begivenhet) {
//...
 };
};

Denne funksjonen oppretter en transaksjon med objektlageret "userStore" og setter modusen til "readwrite". Deretter henter den objektlageret og legger til brukerdata til det ved hjelp av Legg til metode.

Henter data fra IndexedDB

For å hente data fra en IndexedDB-database, må du opprette en transaksjon på objektlageret du vil hente dataene fra og deretter bruke få() eller få alt() metode på transaksjonen for å hente dataene avhengig av mengden data du ønsker å hente.

De få() metoden tar en verdi for primærnøkkelen til objektet du vil hente og returnerer objektet med den tilsvarende nøkkelen fra objektlageret.

De få alt() metoden returnerer alle dataene i et objektlager. Den tar også en valgfri begrensning som argument og returnerer alle samsvarende data fra butikken.

konst getUserData = (id, db) => {
konst transaksjon = db.transaction("userStore", "skrivebeskyttet");
konst userObjectStore = transaksjon.objectStore("userStore");
// Kom med en forespørsel om å få dataene
konst request = userObjectStore.get (id);


 request.onsuccess = funksjon (begivenhet) {
konsoll.log (request.result);
 };
 request.onerror = funksjon (begivenhet) {
// Håndteringsfeil
 };
};

Denne funksjonen oppretter en transaksjon med objektlageret "userStore" og setter modusen til "skrivebeskyttet". Den henter deretter brukerdata med matchende ID fra objektlageret.

Oppdatering av data med IndexedDB

For å oppdatere data i IndexedDB, må du opprette en transaksjon med "readwrite"-modus. Fortsett ved å hente objektet du vil oppdatere ved å bruke få() metode. Deretter endrer du objektet og kaller sette() metode på objektlageret for å lagre det oppdaterte objektet tilbake til databasen.

konst updateUserData = (id, brukerdata, db) => {
konst transaksjon = db.transaction("userStore", "Les Skriv");
konst userObjectStore = transaksjon.objectStore("userStore");
// Kom med en forespørsel om å få dataene
konst getRequest = userObjectStore.get (id);


// Håndtere en suksesshendelse
 getRequest.onsuccess = funksjon (begivenhet) {
// Få de gamle brukerdataene
konst bruker = event.target.result;


// Oppdater brukerdataene
 bruker.navn = brukerData.navn;
 user.email = brukerData.email;


// Kom med en forespørsel om å oppdatere dataene
konst putRequest = userObjectStore.put (bruker);


 putRequest.onsuccess = funksjon (begivenhet) {
// Håndter suksess
 };


 putRequest.onerror = funksjon (begivenhet) {
// Håndteringsfeil
 };
 };
 getRequest.onerror = funksjon (begivenhet) {
// Håndteringsfeil
 };
};

Denne funksjonen oppretter en transaksjon for å hente og oppdatere databasens data.

Sletting av data fra IndexedDB

For å slette data fra IndexedDB, må du opprette en transaksjon med "readwrite"-modus. Ring deretter slett() metode på objektlageret for å fjerne objektet fra databasen:

konst deleteUserData = (id, db) => {
konst transaksjon = db.transaction("userStore", "Les Skriv");
konst userObjectStore = transaksjon.objectStore("userStore");
// Kom med en forespørsel om å slette dataene
konst request = userObjectStore.delete (id);


 request.onsuccess = funksjon (begivenhet) {
// Håndter suksess
 };
 request.onerror = funksjon (begivenhet) {
// Håndteringsfeil
 };
};

Denne funksjonen oppretter en transaksjon som sletter dataene med den tilsvarende id-en fra objektlageret ditt.

Bør du bruke IndexedDB eller localStorage?

Valget mellom IndexedDB og andre databaser på klientsiden, for eksempel localStorage, avhenger av applikasjonens krav. Bruk localStorage for enkel lagring av små mengder data. Velg IndexedDB for store strukturerte datasett som krever spørring og filtrering.