Az IndexedDB használata adatbázisként

Az IndexedDB egy kliensoldali NoSQL adatbázis, amely lehetővé teszi strukturált adatok tárolását és lekérését a felhasználó webböngészőjében.

Az IndexedDB számos előnnyel rendelkezik, például nagyobb memóriát és offline adattárolást és visszakeresést biztosít más tárolási lehetőségekhez, például a localStorage-hoz képest. Itt megtudhatja, hogyan kell az IndexedDB-t adatbázisként használni.

Adatbázis beállítása

Az adatbázis létrehozásához létre kell hoznia egy nyitott kérelmet az IndexedDB használatával nyisd ki módszer. A nyisd ki metódus egy IDBOpenDBRequest tárgy. Ez az objektum hozzáférést biztosít a siker, hiba, és frissítvekibocsátott események a nyitott műveletből.

A nyisd ki A metódus két argumentumot használ: egy nevet és egy opcionális verziószámot. A name argumentum az adatbázis nevét jelöli. A verziószám az adatbázis azon verzióját adja meg, amellyel az alkalmazás várhatóan működni fog. Az alapértelmezett érték nulla.

A következőképpen hozhat létre nyitott kérelmet:

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

A nyílt kérés létrehozása után meg kell hallgatnia és kezelni az eseményeket a visszaadott tárgyon.

A siker esemény akkor következik be, amikor sikeresen létrehozza az adatbázist. A kibocsátás után hozzáférhet az adatbázis-objektumhoz ezen keresztül esemény.cél.eredmény:

openRequest.onsuccess = funkció (esemény) {
const db = esemény.cél.eredmény;
konzol.log("Adatbázis létrehozva", db);
};

A fenti példa a sikeres eseményt az adatbázis-objektum naplózásával kezeli.

A hiba esemény akkor következik be, ha az IndexedDB problémába ütközik az adatbázis létrehozásakor. Ezt úgy kezelheti, hogy naplózza a hibát a konzolon, vagy mást használ hibakezelési módszerek:

openRequest.onror = funkció (esemény) {
// ...
};

A frissítve esemény akkor következik be, amikor először létrehozza az adatbázist, vagy frissíti a verzióját. Csak egyszer tüzel, így ideális hely egy tárgytároló létrehozásához.

Tárgytár létrehozása

Az objektumtároló hasonló a szerveroldali relációs adatbázisokban lévő táblákhoz. Kulcs-érték párok tárolására objektumtárolót használhat.

Objektumtárolókat kell létrehoznia válaszul a frissítve esemény. Ez az esemény akkor aktiválódik, amikor létrehozza az adatbázis új verzióját, vagy frissít egy meglévő verziót. Ez biztosítja, hogy az adatbázis helyesen és naprakészen legyen konfigurálva, mielőtt bármilyen adatot hozzáadna.

Objektumtárolót a createObjectStore módszer, amelyhez az adatbázis hivatkozásán keresztül férhet hozzá. Ez a metódus az objektumtároló nevét és egy konfigurációs objektumot veszi argumentumként.

A konfigurációs objektumban meg kell határozni egy elsődleges kulcsot. Az elsődleges kulcsot egy kulcsútvonal meghatározásával határozhatja meg, amely egy olyan tulajdonság, amely mindig létezik és egyedi értéket tartalmaz. Alternatív megoldásként használhat kulcsgenerátort a keyPath tulajdona "id" és a autoIncrement tulajdonát igaz a konfigurációs objektumban.

Például:

openRequest.onupgradeneeded = funkció (esemény) {
const db = esemény.cél.eredmény;
// Objektumtároló létrehozása
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "azonosító",
 autoIncrement: igaz,
 });
}

Ez a példa létrehoz egy „userStore” nevű objektumtárolót az adatbázisban, és annak elsődleges kulcsát egy automatikusan növekvő azonosítóra állítja be.

Indexek meghatározása

Az IndexedDB-ben az index az adatok hatékonyabb rendszerezésének és lekérésének módja. Ez lehetővé teszi az objektumtárban való keresést és az indexelt tulajdonságok alapján történő rendezését.

Egy objektumtároló indexének meghatározásához használja a createIndex() objektumtároló objektum metódusa. Ez a metódus egy indexnevet, egy tulajdonságnevet és egy konfigurációs objektumot vesz fel argumentumként:

userObjectStore.createIndex("név", "név", { egyedi: hamis });
userObjectStore.createIndex("email", "email", { egyedi: igaz });

Ez a fenti kódblokk két indexet határoz meg, a "név" és az "e-mail" címet userObjectStore. A "név" index nem egyedi, ami azt jelenti, hogy több objektumnak lehet ugyanaz a névértéke, míg az "e-mail" index egyedi, ami biztosítja, hogy két objektumnak ne legyen azonos e-mail értéke.

Íme egy teljes példa arra, hogyan lehet kezelni egy frissítve esemény:

openRequest.onupgradeneeded = funkció (esemény) {
const db = esemény.cél.eredmény;
// Objektumtároló létrehozása
const userObjectStore = db.createObjectStore("userStore", {
 keyPath: "azonosító",
 autoIncrement: igaz,
 }); 
// Indexek létrehozása
 userObjectStore.createIndex("név", "név", { egyedi: hamis });
 userObjectStore.createIndex("email", "email", { egyedi: igaz });
};

Adatok hozzáadása az IndexedDB-hez

Az IndexedDB-ben végrehajtott tranzakció több olvasási és írási művelet egyetlen műveletbe történő csoportosításának módja. Az adatok konzisztenciájának és integritásának biztosítása érdekében, ha a tranzakción belüli műveletek egyike meghiúsul, az IndexedDB visszaállítja az összes műveletet.

Ha adatokat szeretne hozzáadni egy IndexedDB adatbázishoz, létre kell hoznia egy tranzakciót az objektumtárolóban, amelyhez hozzá szeretné adni az adatokat, majd használja a add() módszert a tranzakcióhoz az adatok hozzáadásához.

Tranzakciót létrehozhat a tranzakció módszert az adatbázis-objektumban. Ennek a metódusnak két argumentuma van: az adattár neve (nevei) és a tranzakció módja, amely lehet csak olvasható (alapértelmezett) vagy ír olvas.

Ezután hívja a objectStore() metódust a tranzakción, és adja át annak az objektumtárolónak a nevét, amelyhez adatokat szeretne hozzáadni. Ez a metódus hivatkozást ad vissza az objektumtárolóra.

Végül hívja a add() metódust az objektumtárolóban, és adja át a hozzáadni kívánt adatokat:

const addUserData = (userData, db) => {
// Tranzakció megnyitása
const tranzakció = db.transaction("userStore", "ír olvas");
// Adatok hozzáadása az objektumtárolóhoz
const userObjectStore = tranzakció.objectStore("userStore");
// Kérjen userData hozzáadását
const kérés = userObjectStore.add (felhasználói adatok);
// Sikeresemény kezelése
 kérés.onsuccess = funkció (esemény) {
//...
 };
// Hiba kezelése
 kérés.hiba = funkció (esemény) {
//...
 };
};

Ez a funkció tranzakciót hoz létre a "userStore" objektumtárolóval, és a módot "readwrite"-re állítja. Ezután megkapja az objektumtárolót, és hozzáadja a felhasználói adat a segítségével add hozzá módszer.

Adatok lekérése az IndexedDB-ből

Adatok IndexedDB adatbázisból való lekéréséhez létre kell hoznia egy tranzakciót az objektumtárolóban, amelyből az adatokat le szeretné kérni, majd használja a kap() vagy getAll() módszert a tranzakcióra az adatok lekéréséhez a lekérni kívánt adatok mennyiségétől függően.

A kap() A metódus értéket vesz a lekérni kívánt objektum elsődleges kulcsához, és visszaadja az objektumot a megfelelő kulccsal az objektumtárolóból.

A getAll() metódus visszaadja az összes adatot egy objektumtárolóban. Ezenkívül egy opcionális kényszert vesz fel argumentumként, és visszaadja az összes egyező adatot az áruházból.

const getUserData = (azonosító, db) => {
const tranzakció = db.transaction("userStore", "csak olvasható");
const userObjectStore = tranzakció.objectStore("userStore");
// Kérjen az adatok beszerzésére
const kérés = userObjectStore.get (id);
 kérés.onsuccess = funkció (esemény) {
konzol.log (request.result);
 };
 kérés.hiba = funkció (esemény) {
// Kezelési hiba
 };
};

Ez a funkció tranzakciót hoz létre a "userStore" objektumtárolóval, és a módot "readonly"-ra állítja. Ezután lekéri a felhasználói adatokat a megfelelő azonosítóval az objektumtárolóból.

Adatok frissítése az IndexedDB segítségével

Az IndexedDB adatainak frissítéséhez létre kell hoznia egy tranzakciót az "olvasási" móddal. Folytassa a frissíteni kívánt objektum lekérésével a segítségével kap() módszer. Ezután módosítsa az objektumot, és hívja a tesz() metódussal az objektumtárolóban a frissített objektum visszamentéséhez az adatbázisba.

const updateUserData = (id, userData, db) => {
const tranzakció = db.transaction("userStore", "ír olvas");
const userObjectStore = tranzakció.objectStore("userStore");
// Kérjen az adatok beszerzésére
const getRequest = userObjectStore.get (id);
// Sikeresemény kezelése
 getRequest.onsuccess = funkció (esemény) {
// Szerezze be a régi felhasználói adatokat
const user = event.target.result;
// Frissítse a felhasználói adatokat
 user.name = userData.name;
 user.email = userData.email;
// Kérjen az adatok frissítését
const putRequest = userObjectStore.put (felhasználó);
 putRequest.onsuccess = funkció (esemény) {
// Kezelje a sikert
 };
 putRequest.onror = funkció (esemény) {
// Kezelési hiba
 };
 };
 getRequest.onror = funkció (esemény) {
// Kezelési hiba
 };
};

Ez a funkció tranzakciót hoz létre az adatbázis adatainak lekéréséhez és frissítéséhez.

Adatok törlése az IndexedDB-ből

Az adatok IndexedDB-ből való törléséhez létre kell hoznia egy tranzakciót az "olvasási" móddal. Ezután hívja a töröl() metódus az objektumtárolóban az objektum adatbázisból való eltávolításához:

const deleteUserData = (azonosító, db) => {
const tranzakció = db.transaction("userStore", "ír olvas");
const userObjectStore = tranzakció.objectStore("userStore");
// Kérem az adatok törlését
const kérés = userObjectStore.delete (id);
 kérés.onsuccess = funkció (esemény) {
// Kezelje a sikert
 };
 kérés.hiba = funkció (esemény) {
// Kezelési hiba
 };
};

Ez a függvény létrehoz egy tranzakciót, amely törli az adatokat a megfelelő azonosítóval az objektumtárból.

IndexedDB-t vagy localStorage-ot kell használnia?

Az IndexedDB és más ügyféloldali adatbázisok, például a localStorage közötti választás az alkalmazás követelményeitől függ. Használja a localStorage alkalmazást kis mennyiségű adat egyszerű tárolására. Válassza az IndexedDB lehetőséget a lekérdezést és szűrést igénylő nagy strukturált adatkészletekhez.