Главная Мануалы Типы хранилищ в браузере IndexedDB хранилище

IndexedDB хранилище

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":

indexedDB в Chrome

Добавим данные:

// получим транзакцию для конкретного объекта; вторым параметром укажем режим (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('Данные обновлены');
  };
};

Предыдущая Следующая