Перейти к содержимому

JavaScript IndexedDB

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

Настройка базы данных IndexedDB

Шаг 1: Открытие базы данных

Чтобы использовать IndexedDB, первым шагом нужно открыть базу данных. Вот как можно создать или открыть базу данных IndexedDB. После успешной операции мы закрываем базу данных, чтобы предотвратить нежелательные побочные эффекты в других примерах. Вы можете пропустить этот шаг в своём коде или включить его при необходимости.

Предупреждение: Вызов deleteDatabase() удалит все данные этой базы данных. Это предназначено только для тестирования и не должно использоваться в production.


Output appears here after Run.

Шаг 2: Создание хранилищ объектов

После открытия базы данных можно перейти к созданию хранилища объектов, которое аналогично таблице в реляционных базах данных. Обратите внимание, что это можно сделать только во время обновления версии (при открытии базы данных с более высоким номером версии). Событие, на которое нужно подписаться, — onupgradeneeded.


Output appears here after Run.

Транзакции

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

Как использовать транзакции в IndexedDB

Шаг 1: Запуск транзакции

Чтобы выполнить любую операцию в IndexedDB, сначала нужно создать транзакцию для базы данных. Транзакция создаётся путём указания хранилищ объектов, которые она будет затрагивать, и режима транзакции, который может быть либо "readonly", либо "readwrite".

Шаг 2: Доступ к хранилищу объектов

Внутри транзакции вы можете получить доступ к одному или нескольким хранилищам объектов для выполнения операций с данными.

Шаг 3: Выполнение операций

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

Шаг 4: Завершение транзакции

Транзакция автоматически завершится, как только все операции, выполненные в ней, будут обработаны — успешно или с ошибкой. Вы также можете отслеживать событие complete у транзакции, чтобы выполнить действия после того, как все операции успешно завершатся.

Вот пример полной транзакции:


Output appears here after Run.

Чтение данных

Чтобы получить данные, используйте store.get(key) или курсор для перебора нескольких записей. Вот краткие примеры:

Получение одной записи:


Output appears here after Run.

Перебор с помощью курсора:


Output appears here after Run.

Обновление и удаление записей

Чтобы изменить существующие данные, используйте store.put() с тем же ключом. Чтобы удалить данные, используйте store.delete(key).

Обновление записи:


Output appears here after Run.

Удаление записи:


Output appears here after Run.

Как просмотреть содержимое IndexedDB в браузере

После хранения и изменения данных вы можете захотеть проверить, что именно сохранено в вашем браузере. Большинство современных браузеров показывают, что хранится в IndexedDB. Ниже приведён пример из инструментов разработчика Chrome:

IndexedDB

Лучшие практики использования транзакций

Чтобы ваша реализация IndexedDB оставалась надёжной и производительной, следуйте этим рекомендациям:

  1. Минимизируйте область действия: Делайте транзакции как можно меньше — и по числу операций, и по длительности. Это снижает вероятность конфликтов и повышает производительность.
  2. Обработка ошибок: Всегда реализуйте обработку ошибок как на уровне запросов, так и на уровне транзакций. Это помогает диагностировать проблемы и предотвращать частичные обновления, которые могут привести к повреждению данных.
  3. Конкурентность: Понимайте, что хотя IndexedDB асинхронен и не блокирует выполнение, транзакции в одной и той же базе данных ставятся в очередь и выполняются последовательно, чтобы предотвратить гонки данных и несогласованность.

Заключение

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

Практика

Каковы характеристики IndexedDB в JavaScript?

Считаете ли это полезным?

Предпросмотр dual-run — сравните с маршрутами Symfony на продакшене.