Близко и Лично с HTML5 IndexedDB

операции

Как и реляционные базы данных, IndexedDB также выполняет все свои операции ввода-вывода в контексте транзакций. Транзакции создаются через объекты соединений и обеспечивают атомарный, надежный доступ к данным и мутации. Есть два ключевых атрибута для объектов транзакции:

1. Сфера

   Область действия определяет, какие части базы данных могут быть затронуты транзакцией. Это в основном помогает реализации IndexedDB определить, какой уровень изоляции следует применять в течение срока действия транзакции. Представьте себе область видимости просто как список таблиц (известных как «хранилища объектов»), которые станут частью транзакции.

2. Режим

   Режим транзакции определяет, какая операция ввода-вывода разрешена в транзакции. Режим может быть:

   1. Только для чтения

      Разрешает только операции «чтения» над объектами, которые являются частью области транзакции.

   2. Читай пиши

      Позволяет операции «чтения» и «записи» над объектами, которые являются частью области транзакции.

   3. Изменение версии

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

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

• когда они завершат
• когда они прерывают и
• когда они тайм-аут

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

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

Давайте продолжим и расширим метод init объекта NotesStore чтобы включить создание хранилища объектов. Я выделил измененные биты жирным шрифтом.

  var NotesStore = {
     название: «notes-db»,
     store_name: «магазин заметок»,
     store_key_path: «id»,
     дБ: ноль,
     вер: «1.0»,
     init: function (callback) {
         var self = this;
         callback = callback ||  function () {};
         Utils.request (window.indexedDB.open («open», this.name), function (e) {
             self.db = e.result;

             // если версия этого БД не равна
             // self.version затем меняем версию
             if (self.db.version! == self.version) {
                 Utils.request (self.db.setVersion (self.ver), function (e2) {
                     var txn = e2.result;

                     // создать хранилище объектов
                     self.db.createObjectStore (self.store_name,
                                               self.store_key_path,
                                               правда);
                     txn.commit ();
                     Перезвони();
                 });
             } еще {
                 Перезвони();
             }
         });
     },

 ... 

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

Добавление данных в хранилища объектов

Новые записи можно добавить в хранилище объектов, вызвав метод put для хранилища объектов. Ссылка на экземпляр хранилища объектов может быть получена через объект транзакции. Давайте реализуем метод addNote нашего объекта NotesStore и посмотрим, как мы можем добавить новую запись:

  ...
     addNote: функция (текст, теги, обратный вызов) {
         var self = this;
         callback = callback ||  function () {};
         var txn = self.db.transaction (null, TransactionMode.ReadWrite);
         var store = txn.objectStore (self.store_name);
         Utils.request (store.put ({
             текст: текст,
             теги: теги
         }), функция (е) {
             txn.commit ();
             Перезвони();
         });
     },

     ... 

Этот метод можно разбить на следующие шаги:

1. Вызовите метод transaction для объекта базы данных, чтобы начать новую транзакцию. Первый параметр — это имена хранилищ объектов, которые станут частью транзакции. Передача null делает все хранилища объектов в базе данных частью области. Второй параметр указывает режим транзакции. Это в основном числовая константа, которую мы объявили так:

     // Константы режима транзакции IndexedDB
    var TransactionMode = {
        ReadWrite: 0,
        ReadOnly: 1,
        Изменение версии: 2
    }; 

2. Как только транзакция создана, мы получаем ссылку на хранилище объектов с objectStore метода objectStore объекта objectStore .
3. Как только у нас появится хранилище объектов, добавление новой записи — это всего лишь вопрос выполнения асинхронного вызова API для метода put хранилища объектов, передавая новый объект, который будет добавлен в хранилище. Обратите внимание, что мы не передаем значение для поля id нового объекта примечания. Поскольку мы передали значение true для параметра auto-generate при создании хранилища объектов, реализация IndexedDB должна позаботиться об автоматическом назначении уникального идентификатора для новой записи.
4. Как только асинхронный вызов put завершается успешно, мы фиксируем транзакцию.

Выполнение запросов с курсорами

Способ IndexedDB для перечисления записей из хранилища объектов заключается в использовании объекта-курсора. Курсор может перебирать записи из основного хранилища объектов или индекса. Курсор имеет следующие ключевые свойства:

1. Диапазон записей в индексе или хранилище объектов.
2. Источник , ссылающийся на индекс или хранилище объектов, по которому перебирает курсор.
3. Позиция, указывающая текущую позицию курсора в заданном диапазоне записей.

Хотя концепция курсора довольно проста, написание кода для фактической итерации по хранилищу объектов несколько сложно, учитывая асинхронный характер всех вызовов API. Давайте реализуем метод listNotes нашего объекта NotesStore и посмотрим, как выглядит код.

  listNotes: функция (обратный вызов) {
         var self = this,
             txn = self.db.transaction (null, TransactionMode.ReadOnly),
             заметки = [],
             store = txn.objectStore (self.store_name);

         Utils.request (store.openCursor (), function (e) {
             var cursor = e.result,
                 iterate = function () {
                     Utils.request (cursor.move (), function (e2) {
                         // если «result» равно true, у нас есть данные
                         // мы достигли конца строки
                         if (e2.result) {
                             notes.push (cursor.value);

                             // рекурсивно получаем следующую запись
                             итерация ();
                         }
                         еще {
                             // мы закончили извлечение строк;  вызвать обратный вызов
                             txn.commit ();
                             Обратный вызов (заметки);
                         }
                     });
                 };

             // установить вращение шара, вызывая итерацию для первого ряда
             итерация ();
         });
     }, 

Давайте разберем эту реализацию:

1. Сначала мы получаем объект транзакции, вызывая метод транзакции объекта базы данных. Обратите внимание, что на этот раз мы указываем, что нам требуется транзакция «только для чтения».
2. Затем мы получаем ссылку на хранилище объектов с помощью метода objectStore объекта транзакции.
3. Затем мы выполняем асинхронный вызов API openCursor в хранилище объектов. Сложность в том, что каждая итерация записи курсора сама по себе является асинхронной операцией! Чтобы предотвратить утопление кода в море обратных вызовов, мы определяем локальную функцию с именем iterate чтобы инкапсулировать логику итерации по каждой записи в курсоре.
4. Эта iterate функция выполняет асинхронный вызов метода перемещения объекта курсора и рекурсивно вызывает себя снова в обратном вызове, если обнаруживает, что есть еще строки, которые нужно извлечь. После того, как все строки в курсоре были получены, мы, наконец, вызываем метод обратного вызова, переданный вызывающей стороной, передавая извлеченные данные в качестве параметра.

Погружайся еще глубже!

Это ни в коем случае не всесторонний охват API, несмотря на то, что вы думаете! Я только покрыл:

1. Доступные варианты реализации хранилища на стороне клиента сегодня
2. Различные ключевые аспекты API IndexedDB, в том числе:
   1. Проверка поддержки браузером
   2. Управление асинхронными вызовами API
   3. Создание / открытие баз данных
   4. Ключевые части API, включая хранилища объектов, ключи / значения, управление версиями и транзакции
3. Создание хранилищ объектов
4. Добавление записей в хранилища объектов
5. Перечисление хранилищ объектов с использованием курсоров

Надеюсь, это было близко и достаточно лично!

Теперь, если вы готовы к большему, документ спецификации W3C является хорошим справочником и достаточно короток, чтобы его можно было прочитать! Я бы посоветовал вам поэкспериментировать — доступ к функциональной базе данных на стороне клиента открывает ряд новых сценариев для веб-приложений.

Другим хорошим ресурсом является пример IndexedDB / AppCache на сайте IE Test Drive . В этом примере рассматривается сценарий, в котором две спецификации дополняют друг друга, предоставляя пользователю богатый опыт… даже когда он не подключен к Интернету. Образец также демонстрирует использование новых функций в IE10, таких как 3D-преобразования CSS3 и переходы CSS3.

Веселиться!