IndexedDB - это объектно-ориентированная база данных на основе JavaScript. IndexedDB позволяет хранить и извлекать объекты, проиндексированные с помощью ключа (первичный ключ - например, CARD). Могут быть сохранены любые объекты, поддерживаемые алгоритмом структурированного клонирования (например, видео, изображения). IndexedDB намного сложнее в использовании, чем API веб-хранилища.
IndexedDB - это способ постоянно хранить большой объем данных в браузере пользователя. IndexedDB позволяет создавать веб-приложения с расширенными возможностями независимо от доступности сети. Эти приложения могут работать как онлайн, так и офлайн.
IndexDB API является асинхронным и не блокирует отрисовку пользовательского интерфейса. Этот API использует индексы для обеспечения высокопроизводительного поиска данных.
Создайте схему базы данных и объекты, откройте соединение с вашей базой данных, а затем извлеките и обновите данные в рамках серии транзакций. IndexDB позволяет хранить значительные объемы структурированных данных. Этот размер зависит от браузера.
База данных является частной для источника, поэтому любой другой сайт не может получить доступ к другому веб-сайту, который хранится в IndexedDB.
Средствами JavaScript откроем хранилище и поместим туда данные:
const userData = [
{ card: '444-44-4444', name: 'Иван', age: 35, email: 'ivan@mail.com' },
{ card: '555-55-5555', name: 'Петр', age: 32, email: 'petr@mail.com' }
];
const dbName = 'testDB';
var db;
// откроем базу; если её ещё не существует, она будет создана
// укажите имя и версию БД; обновите номер версии, если необходимо изменить структуру БД
var request = indexedDB.open(dbName, 2);
// обрабатываем ошибки
request.onerror = function() {
console.log('Ошибка', request.error);
};
// обрабатываем успешный запрос
request.onsuccess = function() {
db = request.result;
console.log('Запрос успешный', db);
};
// обработчик успешного открытия базы данных
// обновите существующую ДБ, если версия отличается или создайте объект
request.onupgradeneeded = function(event) {
var _db = event.target.result;
// autoIncrement: true; - ключ будет формироваться автоматически для новых объектов, как постоянно увеличивающееся число
// создаем объект хранилища с ключом
var objectStore = _db.createObjectStore('users', { keyPath: 'card' }); // хранилище объектов использует свойство card как ключ
// определим необходимые индексы
objectStore.createIndex('name', 'name', { unique: false });
objectStore.createIndex('email', 'email', { unique: true });
// добавим данные к объекту
userData.forEach(function(user) {
objectStore.add(user);
});
};
Теперь посмотреть и управлять созданной базой можно в самом браузере в инструментах разработчика (F12 в Chrome) во вкладке "Application":
Добавим данные:
// получим транзакцию для конкретного объекта; вторым параметром укажем режим (readonly, readwrite, versionchange)
var transaction = db.transaction(['users'], 'readwrite');
// обработчик вызывается, когда все данные добавляются в базу данных
transaction.oncomplete = function() {
console.log('Транзакция завершена');
};
// обработчик ошибок
transaction.onerror = function() {
console.log('Ошибка', transaction.error);
};
const userDataNew = [{ card: '777-77-7777', name: 'Алекс', age: 32, email: 'alex@mail.com' }];
// добавим нового юзера в хранилище
var objectStore = transaction.objectStore('users');
userDataNew.forEach(function(user) {
var request = objectStore.add(user);
request.onsuccess = function(event) {
console.log('Данные добавлены', event.target.result);
};
});
Удалим данные из хранилища с помощью ключа и метода удаления:
var request = db.transaction(['users'], 'readwrite')
.objectStore('users')
.delete('777-77-7777');
request.onsuccess = function() {
console.log('Запись удалена');
};
Считаем данные из хранилища через ключ и GET-метод:
var transaction = db.transaction(['users']);
var objectStore = transaction.objectStore('users');
var request = objectStore.get('444-44-4444');
request.onerror = function() {
console.log('Ошибка', request.error);
};
request.onsuccess = function() {
console.log('Имя пользователя 444-44-4444:', request.result.name);
};
Считаем данные хранилища, используя cursor:
var objectStore = db.transaction('users').objectStore('users');
objectStore.openCursor().onsuccess = function(event) {
var cursor = event.target.result;
if (cursor) {
console.log('card:', cursor.key);
console.log('name:', cursor.value.name);
console.log('age:', cursor.value.age);
cursor.continue();
}
else {
console.log('Записей больше нет');
}
};
Обновим данные хранилища через ключ и PUT-метод:
var objectStore = db.transaction(['users'], 'readwrite').objectStore('users');
var request = objectStore.get('444-44-4444');
request.onerror = function() {
console.log('Ошибка', request.error);
};
request.onsuccess = function(event) {
// получим актуальные данные
var data = event.target.result;
// обновим значение
data.age = 42;
// вставим обновлённый объект в хранилище
var requestUpdate = objectStore.put(data);
requestUpdate.onerror = function() {
console.log(requestUpdate.error);
};
requestUpdate.onsuccess = function() {
console.log('Данные обновлены');
};
};