Что такое IndexedDB

1️⃣ Как кратко ответить

IndexedDB — это низкоуровневое API для хранения значительных объемов структурированных данных в браузере. Оно позволяет сохранять данные в виде объектов и выполнять запросы к ним с использованием индексов, обеспечивая асинхронный доступ и поддержку транзакций.

2️⃣ Подробное объяснение темы

IndexedDB — это встроенная в браузеры база данных, которая позволяет веб-приложениям хранить значительные объемы данных на стороне клиента. В отличие от других механизмов хранения, таких как LocalStorage, IndexedDB предоставляет более сложные возможности для работы с данными, включая индексацию и транзакции.

Зачем нужна IndexedDB

IndexedDB используется для хранения данных, которые могут быть слишком большими для других механизмов, таких как LocalStorage или SessionStorage. Она позволяет сохранять данные в виде объектов, что делает её идеальной для приложений, которые работают с большими объемами данных, например, офлайн-приложения, которые должны сохранять данные между сессиями.

Как работает IndexedDB

IndexedDB работает асинхронно, что означает, что операции чтения и записи не блокируют основной поток выполнения JavaScript. Это важно для поддержания отзывчивости пользовательского интерфейса.

Основные концепции IndexedDB

1. База данных (Database): Это контейнер для хранения данных. Каждая база данных может содержать несколько хранилищ объектов.

2. Хранилище объектов (Object Store): Это аналог таблицы в реляционной базе данных. Хранилище объектов содержит записи, которые могут быть любыми JavaScript-объектами.

3. Запись (Record): Это отдельный объект, хранящийся в хранилище объектов. Каждая запись имеет уникальный ключ.

4. Ключ (Key): Уникальный идентификатор для каждой записи в хранилище объектов. Ключ может быть числом, строкой или датой.

5. Индекс (Index): Это структура данных, которая позволяет быстро находить записи по определённым полям.

6. Транзакция (Transaction): Это набор операций, которые выполняются атомарно. Если одна из операций в транзакции не удаётся, все изменения откатываются.

Пример использования IndexedDB

Рассмотрим простой пример создания базы данных и добавления в неё записи.

// Открываем (или создаем) базу данных с именем 'myDatabase' версии 1
let request = indexedDB.open('myDatabase', 1);
​
// Обработчик события, который срабатывает при создании или обновлении базы данных
request.onupgradeneeded = function(event) {
  let db = event.target.result;
​
  // Создаем хранилище объектов с именем 'customers' и ключом 'id'
  let objectStore = db.createObjectStore('customers', { keyPath: 'id' });
​
  // Создаем индекс для поиска по имени
  objectStore.createIndex('name', 'name', { unique: false });
};
​
// Обработчик события, который срабатывает при успешном открытии базы данных
request.onsuccess = function(event) {
  let db = event.target.result;
​
  // Начинаем транзакцию для чтения и записи в хранилище 'customers'
  let transaction = db.transaction(['customers'], 'readwrite');
​
  // Получаем хранилище объектов
  let objectStore = transaction.objectStore('customers');
​
  // Добавляем новую запись в хранилище
  let customer = { id: 1, name: 'John Doe', email: 'john.doe@example.com' };
  let addRequest = objectStore.add(customer);
​
  // Обработчик события, который срабатывает при успешном добавлении записи
  addRequest.onsuccess = function(event) {
    console.log('Customer added to the database');
  };
​
  // Обработчик события, который срабатывает при ошибке транзакции
  transaction.onerror = function(event) {
    console.error('Transaction failed', event.target.error);
  };
};

• indexedDB.open('myDatabase', 1); — открывает или создает базу данных с именем 'myDatabase' версии 1.
• onupgradeneeded — событие, которое срабатывает при создании или обновлении базы данных. Здесь создается хранилище объектов 'customers' с ключом 'id' и индексом 'name'.
• onsuccess — событие, которое срабатывает при успешном открытии базы данных. Здесь начинается транзакция для добавления новой записи.
• transaction — объект, представляющий транзакцию. В данном случае транзакция открыта для чтения и записи.
• objectStore.add(customer); — добавляет новую запись в хранилище объектов.
• onsuccess и onerror — обработчики событий для успешного добавления записи и ошибки транзакции соответственно.

IndexedDB — мощный инструмент для создания сложных веб-приложений, которые требуют хранения и обработки больших объемов данных на стороне клиента.