Для получения объекта из хранилища мы можем использовать ряд методов объекта IDBObjectStore. Рассмотрим различные варианты выборки.
Для получения всех объектов из хранилища объект IDBObjectStore предоставляет метод getAll()
getAll()
Этот метод возвращает объект IDBRequest. Если метод выполняется успешно, то для объекта IDBRequest генерируется событие success, а его свойство result содержит массив полученных данных из хранилища. В случае возникновения ошибки у объекта IDBRequest срабатывает событие error, а его свойство error содержит информацию об ошибке. Для обработки этих событий можно использовать соответственно свойства onsuccess и onerror
Например, получим все объекты из хранилища "users":
const request = indexedDB.open("test", 5); // подключаемся к бд test
// при создании или изменении версии базы данных создаем в ней хранилище users
request.onupgradeneeded = (event) => {
const db = event.target.result; // получаем бд
// ключом является свойство id, и оно автоматически инкрементируется
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});
};
// при открытии базы данных получаем все данные
request.onsuccess = (event) => {
const db = event.target.result; // получаем бд
const transaction = db.transaction(["users"], "readwrite"); // создаем транзакцию
const userStore = transaction.objectStore("users"); // получаем хранилище users
const getRequest = userStore.getAll(); // получаем все объекты
getRequest.onsuccess = (e) => {
const users = getRequest.result;
console.log(users);
}
getRequest.onerror = (e) => console.log(e.target.error.message); // выводим сообщение об ошибке
};
Здесь в обработчике getRequest.onsuccess получаем извлеченные данные в константу users и выводим их на консоль:
getRequest.onsuccess = (e) => {
const users = getRequest.result;
console.log(users);
}
Так, в моем случае в хранилище содержатся три объекта со свойствами id (ключ), name и age:
[
{ name: "Tom", age: 39, id: 1},
{ name: "Bob", age: 43, id: 2},
{ name: "Sam", age: 28, id: 3}
]
Поскольку результат представляет массив, то мы можем использовать индексы и получить какие-то определенные элементы массива или перебрать массив:
getRequest.onsuccess = (e) => {
const users = getRequest.result;
for(user of users){
console.log(`Name: ${user.name} Age: ${user.age}`);
}
}
Дополнительная версия метода getAll() позволяет отфильтровать объекты или выбрать только те объекты, которые соответствуют определенному диапазону ключей:
getAll(query) getAll(query, count)
В качестве параметра query в метод передается ключ или объект IDBKeyRange, который задает диапазон ключей. Дополнительно параметр count позволяет задать максимальное количество элементов в выборке.
Например, мы можем передать значение ключа:
const getRequest = userStore.getAll(2); // получаем объекты, у которых свойство ключа равно 2
getRequest.onsuccess = (e) => {
console.log(e.target.result);
}
В данном случае получаем все элементы, у которых значение свойства-ключа равно 2.
Применение объекта IDBKeyRange предоставляет дополнительные возможности с помощью ряда статических методов:
IDBKeyRange.bound(): создает диапазон ключей, для которого задано минимальное и максимальное значения
IDBKeyRange.only(): создает диапазон ключей, который содержит только одно значение
IDBKeyRange.lowerBound(): создает диапазон ключей, для которого задано минимальное значение
IDBKeyRange.upperBound(): создает диапазон ключей, для которого задано максимальное значение
Диапазоны ключей, которые создаются с помощью этих методов, можно описать следующей таблицей:
Диапазон |
Код |
Значение ключа >= |
|
Значение ключа > |
|
Значение ключа <= |
|
Значение ключа < |
|
Значение ключа >= |
|
Значение ключа > |
|
Значение ключа > |
|
Значение ключа >= |
|
Значение ключа = |
|
Например, получаем все объекты, у которых значение ключа не больше 2:
const getRequest = userStore.getAll(IDBKeyRange.upperBound(2));
getRequest.onsuccess = () => {
const users = getRequest.result;
console.log(users);
}
Для получения одного объекта по ключу применяется метод get(), в который передается ключ объекта:
get(key)
Результатом метода является объект IDBRequest. В случае успешного добавления у этого объекта срабатывает событие success, а его свойство result будет
содержать объект с указанным ключом. В случае ошибки генерируется событие error вместе с
исключением типа DOMException.
Например, получим объект с ключом 1:
const request = indexedDB.open("test", 5); // подключаемся к бд test
// при создании или изменении версии базы данных создаем в ней хранилище users
request.onupgradeneeded = (event) => {
const db = event.target.result; // получаем бд
// ключом является свойство id, и оно автоматически инкрементируется
db.createObjectStore("users", { keyPath: "id", autoIncrement: true });
};
// при открытии базы данных получаем один объект
request.onsuccess = (event) => {
const db = event.target.result; // получаем бд
const transaction = db.transaction(["users"], "readwrite"); // создаем транзакцию
const userStore = transaction.objectStore("users"); // получаем хранилище users
const getRequest = userStore.get(1); // получаем объект по ключу 1
getRequest.onsuccess = () => console.log(getRequest.result); // выводим полученный объект
getRequest.onerror = (e) => console.log(e.target.error.message); // выводим сообщение об ошибке
};
Результат в моем случае:
Object
age: 39
id: 1
name: "Tom"
[[Prototype]]: Object
Также извлеченный объект мы можем получить через параметр обработчика события - через его свойство event.target.result:
const getRequest = userStore.get(1); // получаем объект по ключу 1
getRequest.onsuccess = (e) => {
const user = e.target.result; // полученный объект
console.log(user.name);
console.log(user.age);
}
Если мы попробуем найти объект с несуществующим ключом, то свойство result будет равно undefined