Что такое IndexedDB

• Object stores (= collections): организуют records по keyPath
• Transactions: readonly / readwrite / versionchange
• Indexes: secondary keys для efficient queries
• Storage quota: ~20-60% free disk (Chrome), ~1GB (Safari)
• Eviction: browser может очистить при нехватке space

const request = indexedDB.open('myDB', 1);
request.onupgradeneeded = e => {
  e.target.result.createObjectStore('users', { keyPath: 'id' });
};
request.onsuccess = e => {
  const tx = e.target.result.transaction('users', 'readwrite');
  tx.objectStore('users').put({ id: 1, name: 'Alice' });
};

• Service Worker
• Core Web Vitals

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

IndexedDB работает по принципу хранения объектов, что позволяет легко структурировать данные. Основные компоненты IndexedDB включают:

• База данных: контейнер для хранения объектов и хранилищ.
• Объекты: хранятся в виде пар «ключ-значение».
• Хранилища объектов: аналог таблиц в реляционных базах данных, где хранятся объекты.

Для работы с IndexedDB используются асинхронные операции, что позволяет избежать блокировки пользовательского интерфейса. Для открытия базы данных используется метод indexedDB.open(), который принимает имя базы данных и её версию.

Пример создания базы данных:

const request = indexedDB.open('myDatabase', 1); request.onupgradeneeded = function(event) { const db = event.target.result; db.createObjectStore('myStore', { keyPath: 'id' }); };

Рассмотрим практический пример использования IndexedDB для хранения и извлечения данных. В этом примере мы создадим базу данных, добавим в неё объект и затем извлечем его.

Создание базы данных и хранилища:

const request = indexedDB.open('myDatabase', 1); request.onupgradeneeded = function(event) { const db = event.target.result; const objectStore = db.createObjectStore('myStore', { keyPath: 'id' }); };

Добавление данных:

request.onsuccess = function(event) { const db = event.target.result; const transaction = db.transaction(['myStore'], 'readwrite'); const objectStore = transaction.objectStore('myStore'); const data = { id: 1, name: 'John Doe' }; objectStore.add(data); };

Извлечение данных:

const transaction = db.transaction(['myStore'], 'readonly'); const objectStore = transaction.objectStore('myStore'); const request = objectStore.get(1); request.onsuccess = function(event) { console.log(event.target.result); };

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

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

IndexedDB предоставляет ряд преимуществ, которые делают её привлекательной для разработчиков:

• Большие объемы данных: IndexedDB позволяет хранить данные объемом до нескольких гигабайт, в отличие от localStorage, который ограничен 5-10 МБ.
• Асинхронные операции: Все операции с IndexedDB выполняются асинхронно, что предотвращает блокировку пользовательского интерфейса.
• Поддержка транзакций: IndexedDB поддерживает транзакции, обеспечивая целостность данных при выполнении нескольких операций.
• Гибкие структуры данных: Возможность хранения объектов JavaScript, что делает её более удобной для работы с сложными данными.

Эти преимущества делают IndexedDB идеальным выбором для приложений, требующих надежного хранения данных.

В IndexedDB данные хранятся в виде объектов, которые организованы в хранилища (object stores). Каждое хранилище может иметь ключи, которые используются для идентификации объектов. Ключи могут быть как автоинкрементными, так и заданными вручную.

Для работы с IndexedDB необходимо использовать интерфейс IndexedDB, который предоставляет методы для создания, чтения, обновления и удаления данных. Вот базовый пример создания базы данных и хранилища:

let request = indexedDB.open('MyDatabase', 1); request.onupgradeneeded = function(event) { const db = event.target.result; const objectStore = db.createObjectStore('MyObjectStore', { keyPath: 'id' }); };

Этот код создает базу данных с именем MyDatabase и хранилище MyObjectStore, где id будет ключом для объектов.

После создания базы данных и хранилища можно добавлять, извлекать и изменять данные. Для добавления данных используется метод add:

let transaction = db.transaction(['MyObjectStore'], 'readwrite'); let objectStore = transaction.objectStore('MyObjectStore'); let item = { id: 1, name: 'Item 1' }; objectStore.add(item);

Здесь мы создаем транзакцию, указывая, что будем работать с хранилищем MyObjectStore, и добавляем новый объект.

Для извлечения данных можно использовать метод get:

let request = objectStore.get(1); request.onsuccess = function(event) { console.log(event.target.result); };

Этот код извлекает объект с ключом 1 и выводит его в консоль.

При работе с IndexedDB важно учитывать возможность возникновения ошибок. Для этого существуют обработчики событий onerror и onsuccess. Например, чтобы обработать ошибку добавления данных:

objectStore.add(item).onsuccess = function(event) { console.log('Item added successfully'); }; objectStore.add(item).onerror = function(event) { console.error('Error adding item:', event.target.error); };

Кроме того, транзакции в IndexedDB могут быть чтением или записью. Транзакции записи позволяют изменять данные, а транзакции чтения — только извлекать. Если возникают ошибки во время транзакции, все изменения отменяются, что обеспечивает целостность данных.

IndexedDB поддерживает индексы, которые позволяют эффективно выполнять поиск по объектам. Индексы создаются при помощи метода createIndex:

objectStore.createIndex('nameIndex', 'name', { unique: false });

В этом примере создается индекс nameIndex для поля name. Теперь можно выполнять запросы к индексам:

let index = objectStore.index('nameIndex'); let request = index.get('Item 1'); request.onsuccess = function(event) { console.log(event.target.result); };

Использование индексов значительно ускоряет операции поиска, особенно при работе с большими объемами данных.