Obținerea datelor din IndexDB
Pentru a obține un obiect din depozit, putem folosi o serie de metode ale obiectului IDBObjectStore. Să examinăm diferitele opțiuni de selecție.
Obținerea tuturor obiectelor din baza de date
Pentru a obține toate obiectele din depozit, obiectul IDBObjectStore oferă metoda getAll():
getAll()Această metodă returnează un obiect IDBRequest. Dacă metoda se execută cu succes, pentru obiectul IDBRequest se generează evenimentul success, iar proprietatea sa result conține un array cu datele obținute din depozit. În cazul apariției unei erori, la obiectul IDBRequest se declanșează evenimentul error, iar proprietatea sa error conține informații despre eroare. Pentru a gestiona aceste evenimente, se pot folosi, respectiv, proprietățile onsuccess și onerror.
De exemplu, să obținem toate obiectele din depozitul "users":
const request = indexedDB.open("test", 5); // ne conectăm la baza de date test
// la crearea sau modificarea versiunii bazei de date, creăm în ea un depozit users
request.onupgradeneeded = (event) => {
const db = event.target.result; // obținem baza de date
// cheia este proprietatea id, și este autoincrementată
const userStore = db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
userStore.add({name: "Tom", age: 39});
userStore.add({name: "Bob", age: 43});
userStore.add({name: "Sam", age: 28});
};
// la deschiderea bazei de date obținem toate datele
request.onsuccess = (event) => {
const db = event.target.result; // obținem baza de date
const transaction = db.transaction(["users"], "readwrite"); // creăm o tranzacție
const userStore = transaction.objectStore("users"); // obținem depozitul users
const getRequest = userStore.getAll(); // obținem toate obiectele
getRequest.onsuccess = (e) => {
const users = getRequest.result;
console.log(users);
}
getRequest.onerror = (e) => console.log(e.target.error.message); // afișăm mesajul de eroare
};Aici, în handlerul getRequest.onsuccess, obținem datele extrase în constanta users și le afișăm în consolă:
getRequest.onsuccess = (e) => {
const users = getRequest.result;
console.log(users);
}Astfel, în cazul meu, în depozit sunt conținute trei obiecte cu proprietățile id (cheie), name și age:
[
{ "name": "Tom", "age": 39, "id": 1},
{ "name": "Bob", "age": 43, "id": 2},
{ "name": "Sam", "age": 28, "id": 3}
]Deoarece rezultatul este un array, putem folosi indici pentru a obține anumite elemente specifice din array sau să parcurgem array-ul:
getRequest.onsuccess = (e) => {
const users = getRequest.result;
for(user of users){
console.log(`Name: ${user.name} Age: ${user.age}`);
}
}Filtrarea după chei
O versiune suplimentară a metodei getAll() permite filtrarea obiectelor sau selectarea doar a acelor obiecte care corespund unui anumit interval de chei:
getAll(query)
getAll(query, count)Ca parametru query în metodă se transmite cheia sau obiectul IDBKeyRange, care stabilește intervalul de chei. Suplimentar, parametrul count permite stabilirea numărului maxim de elemente în selecție.
De exemplu, putem transmite valoarea cheii:
const getRequest = userStore.getAll(2); // obținem obiectele, al căror proprietate-cheie este egală cu 2
getRequest.onsuccess = (e) => {
console.log(e.target.result);
}În acest caz, obținem toate elementele, la care valoarea proprietății-cheie este egală cu 2.
Utilizarea obiectului IDBKeyRange oferă posibilități suplimentare prin intermediul unei serii de metode statice:
- IDBKeyRange.bound(): creează un interval de chei, pentru care sunt stabilite valorile minimă și maximă
- IDBKeyRange.only(): creează un interval de chei, care conține doar o singură valoare
- IDBKeyRange.lowerBound(): creează un interval de chei, pentru care este stabilită valoarea minimă
- IDBKeyRange.upperBound(): creează un interval de chei, pentru care este stabilită valoarea maximă
Intervalele de chei, care sunt create cu ajutorul acestor metode, pot fi descrise de următoarea tabelă:
De exemplu, obținem toate obiectele, la care valoarea cheii nu este mai mare de 2:
const getRequest = userStore.getAll(IDBKeyRange.upperBound(2));
getRequest.onsuccess = () => {
const users = getRequest.result;
console.log(users);
}Obținerea unui singur obiect după cheie
Pentru a obține un singur obiect după cheie se aplică metoda get(), în care se transmite cheia obiectului:
get(key)Rezultatul metodei este un obiect IDBRequest. În cazul unei adăugări de succes, la acest obiect se declanșează evenimentul success, iar proprietatea sa result va conține obiectul cu cheia specificată. În caz de eroare, se generează evenimentul error împreună cu o excepție de tip DOMException.
De exemplu, să obținem obiectul cu cheia 1:
const request = indexedDB.open("test", 5); // ne conectăm la baza de date test
// la crearea sau modificarea versiunii bazei de date, creăm în ea un depozit users
request.onupgradeneeded = (event) => {
const db = event.target.result; // obținem baza de date
// cheia este proprietatea id, și este autoincrementată
db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};
// la deschiderea bazei de date obținem un singur obiect
request.onsuccess = (event) => {
const db = event.target.result; // obținem baza de date
const transaction = db.transaction(["users"], "readwrite"); // creăm o tranzacție
const userStore = transaction.objectStore("users"); // obținem depozitul users
const getRequest = userStore.get(1); // obținem obiectul după cheia 1
getRequest.onsuccess = () => console.log(getRequest.result); // afișăm obiectul obținut
getRequest.onerror = (e) => console.log(e.target.error.message); // afișăm mesajul de eroare
};Rezultatul în cazul meu este:
Object
age: 39
id: 1
name: "Tom"
Prototype: ObjectDe asemenea, obiectul extras îl putem obține prin parametrul handlerului evenimentului - prin proprietatea sa event.target.result:
const getRequest = userStore.get(1); // obținem obiectul după cheia 1
getRequest.onsuccess = (e) => {
const user = e.target.result; // obiectul obținut
console.log(user.name);
console.log(user.age);
}Dacă încercăm să găsim un obiect cu o cheie inexistentă, atunci proprietatea result va fi egală cu undefined.