Kuinka käyttää IndexedDB: tä tietokantana

IndexedDB on asiakaspuolen NoSQL-tietokanta, jonka avulla voit tallentaa ja hakea jäsenneltyä tietoa käyttäjän verkkoselaimessa.

IndexedDB tarjoaa useita etuja, kuten suuremman muistin ja offline-tietojen tallennuksen ja noudon muihin tallennusvaihtoehtoihin, kuten localStorageen, verrattuna. Täällä opit käyttämään IndexedDB: tä tietokantana.

Tietokannan määrittäminen

Tietokannan luomiseksi sinun on luotava avoin pyyntö IndexedDB: n avulla avata menetelmä. The avata menetelmä palauttaa an IDBOpenDBRequest esine. Tämä objekti tarjoaa pääsyn menestys, virhe, ja päivitettytapahtumia avoimesta toiminnasta.

The avata menetelmässä on kaksi argumenttia: nimi ja valinnainen versionumero. Nimiargumentti edustaa tietokantasi nimeä. Versionumero määrittää tietokannan version, jonka kanssa sovelluksesi odottaa toimivan. Oletusarvo on nolla.

Näin luot avoimen pyynnön:

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

Kun olet luonut avoimen pyynnön, sinun on kuunneltava ja hoitaa tapahtumia palautetussa esineessä.

The menestys tapahtuma tapahtuu, kun luot tietokannan onnistuneesti. Kun lähetetty, saat pääsyn tietokantaobjektiisi kautta tapahtuma.kohde.tulos:

openRequest.onsuccess = toiminto (tapahtuma) {
konst db = tapahtuma.kohde.tulos;
konsoli.Hirsi("Tietokanta luotu", db);
};

Yllä oleva esimerkki käsittelee onnistumistapahtuman kirjaamalla tietokantaobjektin lokiin.

The virhe tapahtuma tapahtuu, jos IndexedDB kohtaa ongelman tietokantaa luodessaan. Voit käsitellä sen kirjaamalla virheen konsoliin tai käyttämällä jotakin muuta virheenkäsittelymenetelmiä:

openRequest.onror = toiminto (tapahtuma) {
// ...
};

The päivitetty tapahtuma tapahtuu, kun luot tietokannan ensimmäistä kertaa tai kun päivität sen version. Se syttyy vain kerran, joten se on ihanteellinen paikka esinevaraston luomiseen.

Objektikaupan luominen

Objektivarasto on samanlainen kuin palvelinpuolen relaatiotietokantojen taulukko. Voit käyttää objektivarastoa avainarvo-parien tallentamiseen.

Sinun tulisi luoda objektivarastot vastauksena päivitetty tapahtuma. Tämä tapahtuma käynnistyy, kun luot uuden version tietokannasta tai päivität olemassa olevan version. Tämä varmistaa, että tietokanta on määritetty oikein ja ajan tasalla ennen kuin lisäät tietoja.

Voit luoda esinekaupan käyttämällä CreateObjectStore menetelmä, johon pääset tietokantaasi viitteestä. Tämä menetelmä ottaa objektivaraston nimen ja konfigurointiobjektin argumentteina.

Määritysobjektissa sinun on määritettävä ensisijainen avain. Voit määrittää ensisijaisen avaimen määrittämällä avainpolun, joka on ominaisuus, joka on aina olemassa ja sisältää ainutlaatuisen arvon. Vaihtoehtoisesti voit käyttää avaingeneraattoria asettamalla avainpolku omaisuutta "id" ja automaattinen lisäys omaisuutta totta määritysobjektissasi.

Esimerkiksi:

openRequest.onupgradeneeded = toiminto (tapahtuma) {
konst db = tapahtuma.kohde.tulos;
// Luo objektivarasto
konst userObjectStore = db.createObjectStore("userStore", {
 avainpolku: "id",
 automaattinen lisäys: totta,
 });
}

Tämä esimerkki luo tietokantaan "userStore"-nimisen objektivaraston ja asettaa sen ensisijaisen avaimen automaattisesti kasvavaan tunnukseen.

Indeksien määrittely

IndexedDB: ssä indeksi on tapa järjestää ja hakea tietoja tehokkaammin. Tämän avulla voit etsiä objektivarastosta ja lajitella sen indeksoitujen ominaisuuksien perusteella.

Voit määrittää objektivaraston indeksin käyttämällä createIndex() objektivarastoobjektin menetelmä. Tämä menetelmä ottaa indeksin nimen, ominaisuuden nimen ja konfigurointiobjektin argumentteina:

userObjectStore.createIndex("nimi", "nimi", { ainutlaatuinen: väärä });
userObjectStore.createIndex("sähköposti", "sähköposti", { ainutlaatuinen: totta });

Tämä yllä oleva koodilohko määrittää kaksi hakemistoa, "nimi" ja "sähköposti". userObjectStore. "Nimi"-indeksi ei ole ainutlaatuinen, mikä tarkoittaa, että useilla objekteilla voi olla sama nimiarvo, kun taas "email"-indeksi on yksilöllinen, mikä varmistaa, että kahdella objektilla ei voi olla samaa sähköpostiosoitetta.

Tässä on täydellinen esimerkki siitä, kuinka voit käsitellä päivitetty tapahtuma:

openRequest.onupgradeneeded = toiminto (tapahtuma) {
konst db = tapahtuma.kohde.tulos;
// Luo objektivarasto
konst userObjectStore = db.createObjectStore("userStore", {
 avainpolku: "id",
 automaattinen lisäys: totta,
 }); 
// Luo hakemistoja
 userObjectStore.createIndex("nimi", "nimi", { ainutlaatuinen: väärä });
 userObjectStore.createIndex("sähköposti", "sähköposti", { ainutlaatuinen: totta });
};

Tietojen lisääminen IndexedDB: hen

Tapahtuma IndexedDB: ssä on tapa ryhmitellä useita luku- ja kirjoitustoimintoja yhdeksi toiminnoksi. Tietojen johdonmukaisuuden ja eheyden varmistamiseksi, jos jokin tapahtuman toiminnoista epäonnistuu, IndexedDB peruuttaa kaikki toiminnot.

Jos haluat lisätä tietoja IndexedDB-tietokantaan, sinun on luotava tapahtuma objektivarastoon, johon haluat lisätä tiedot, ja käyttää sitten lisätä() tapa lisätä tiedot.

Voit luoda tapahtuman soittamalla kauppa menetelmä tietokantaobjektissasi. Tämä menetelmä käyttää kahta argumenttia: tietovaraston nimi (nimet) ja tapahtumatapa, joka voi olla Lue ainoastaan (oletus) tai lukea kirjoittaa.

Soita sitten esinekauppa() menetelmä tapahtumassa ja välitä sen objektivaraston nimi, johon haluat lisätä tietoja. Tämä menetelmä palauttaa viittauksen objektivarastoon.

Lopuksi soita lisätä() -menetelmä objektivarastossa ja välitä tiedot, jotka haluat lisätä:

konst addUserData = (userData, db) => {
// Avaa tapahtuma
konst tapahtuma = db.transaction("userStore", "lukea kirjoittaa");
// Lisää tietoja objektivarastoon
konst userObjectStore = tapahtuma.objectStore("userStore");
// Tee pyyntö lisätäksesi userData
konst request = userObjectStore.add (käyttäjätiedot);
// Käsittele menestystapahtuma
 request.onsuccess = toiminto (tapahtuma) {
//...
 };
// Käsittele virhe
 request.error = toiminto (tapahtuma) {
//...
 };
};

Tämä toiminto luo tapahtuman objektivaraston "userStore" kanssa ja asettaa tilaksi "readwrite". Sitten se hakee objektivaraston ja lisää käyttäjätiedot siihen käyttämällä lisätä menetelmä.

Tietojen hakeminen IndexedDB: stä

Jos haluat noutaa tietoja IndexedDB-tietokannasta, sinun on luotava tapahtuma objektivarastoon, josta haluat hakea tiedot, ja käyttää sitten saada() tai hanki kaikki () tapahtuman menetelmä tietojen hakemiseksi noudettavien tietojen määrästä riippuen.

The saada() menetelmä ottaa arvon haettavan objektin ensisijaiselle avaimelle ja palauttaa objektin vastaavalla avaimella objektivarastostasi.

The hanki kaikki () menetelmä palauttaa kaikki objektivaraston tiedot. Se ottaa myös valinnaisen rajoitteen argumenttina ja palauttaa kaikki vastaavat tiedot kaupasta.

konst getUserData = (id, db) => {
konst tapahtuma = db.transaction("userStore", "Lue ainoastaan");
konst userObjectStore = tapahtuma.objectStore("userStore");
// Tee pyyntö tietojen saamiseksi
konst pyyntö = userObjectStore.get (id);
 request.onsuccess = toiminto (tapahtuma) {
konsoli.log (request.result);
 };
 request.error = toiminto (tapahtuma) {
// Käsittele virhe
 };
};

Tämä toiminto luo tapahtuman objektivaraston "userStore" kanssa ja asettaa tilaksi "vain luku". Sitten se hakee käyttäjätiedot vastaavalla tunnuksella objektivarastosta.

Tietojen päivittäminen IndexedDB: llä

Päivittääksesi tiedot IndexedDB: ssä, sinun on luotava tapahtuma "readwrite"-tilassa. Jatka hakemalla päivitettävä objekti käyttämällä saada() menetelmä. Muokkaa sitten objektia ja soita laittaa() -menetelmää objektisäilössä tallentaaksesi päivitetyn objektin takaisin tietokantaan.

konst updateUserData = (id, userData, db) => {
konst tapahtuma = db.transaction("userStore", "lukea kirjoittaa");
konst userObjectStore = tapahtuma.objectStore("userStore");
// Tee pyyntö tietojen saamiseksi
konst getRequest = userObjectStore.get (id);
// Käsittele menestystapahtuma
 getRequest.onsuccess = toiminto (tapahtuma) {
// Hae vanhat käyttäjätiedot
konst käyttäjä = tapahtuma.kohde.tulos;
// Päivitä käyttäjätiedot
 käyttäjä.nimi = käyttäjätiedot.nimi;
 user.email = userData.email;
// Tee tietojen päivityspyyntö
konst putRequest = userObjectStore.put (käyttäjä);
 putRequest.onsuccess = toiminto (tapahtuma) {
// Käsittele menestystä
 };
 putRequest.onror = toiminto (tapahtuma) {
// Käsittele virhe
 };
 };
 getRequest.onror = toiminto (tapahtuma) {
// Käsittele virhe
 };
};

Tämä toiminto luo tapahtuman tietokantasi tietojen saamiseksi ja päivittämiseksi.

Tietojen poistaminen IndexedDB: stä

Jos haluat poistaa tietoja IndexedDB: stä, sinun on luotava tapahtuma "readwrite"-tilassa. Soita sitten poistaa() objektivaraston menetelmä objektin poistamiseksi tietokannasta:

konst deleteUserData = (id, db) => {
konst tapahtuma = db.transaction("userStore", "lukea kirjoittaa");
konst userObjectStore = tapahtuma.objectStore("userStore");
// Tee pyyntö tietojen poistamiseksi
konst request = userObjectStore.delete (id);
 request.onsuccess = toiminto (tapahtuma) {
// Käsittele menestystä
 };
 request.error = toiminto (tapahtuma) {
// Käsittele virhe
 };
};

Tämä toiminto luo tapahtuman, joka poistaa vastaavan tunnuksen omaavat tiedot objektivarastostasi.

Pitäisikö sinun käyttää IndexedDB: tä vai localStoragea?

Valinta IndexedDB: n ja muiden asiakaspuolen tietokantojen, kuten localStoragen, välillä riippuu sovelluksesi vaatimuksista. Käytä localStoragea pienten tietomäärien yksinkertaiseen tallentamiseen. Valitse IndexedDB suurille strukturoiduille tietojoukoille, jotka edellyttävät kyselyä ja suodatusta.