JavaScript: создание приложения для дела (часть 1)

Если вы уже разработали динамические веб -приложения, вы, вероятно, знакомы с понятиями window.localstorage и Window.sessionStorage Это отличные инструменты, которые позволяют нам сохранить информацию непосредственно в браузере, но есть проблема, вы можете сохранить данные только в форме строки, конечно, есть некоторые обходные пути, например, использование Json.stringify () Метод, но разве не было бы неплохо, если бы мы могли просто сохранить данные как объект и получить их одинаково?

Введение

Это первая из серии из четырех частей, где мы построим (еще один) Торговая веб-приложение, используя IndexedDB API . Однако в этой первой части мы заполняем фокус на теории. В частности, мы будем:

• Имейте краткое представление о том, что IndexedDB API является
• Посмотрите, как мы можем получить экземпляр недавно созданной базы данных
• Узнайте о самых релевантных объектах и функциях для выполнения Crud операции

Что такое API IndexedDB?

IndexedDB-это API низкого уровня, который позволяет нам сохранить структурированные данные, такие как файлы и бинарные объекты (Blobs). Он предоставляет нам методы как для синхронных, так и для асинхронных операций, последняя – та, которую реализуют веб -браузеры.

Чтобы создать совершенно новую базу данных, нам нужно использовать Open (имя, версия) Метод на IndexedDB Собственность окно объект. open () Метод получает два параметра:

• имя : Имя базы данных
• Версия : Версия, чтобы открыть базу данных с. По умолчанию 1

Это возвращает Idbopendbrequest Объект, на котором мы можем предоставить обратный вызов, когда запрос успешно разрешен, и если это так, мы можем сохранить ссылку на нашу базу данных.

Весь процесс выглядит примерно так:

let indexedDB, dbName, dbVersion;
const dbRequest = window.indexedDB.open(dbName, dbVersion);
dbRequest.onsuccess = () => {
  indexedDB = dbRequest.result;
  console.log("Database created successfully!");
}
// You can also supply a callback for when (and if) something goes wrong
dbRequest.onerror = () => console.error("Something went wrong...");

Отлично 👏! Теперь у нас есть доступ к совершенно новой базе данных, но сейчас ее пусто без модели, прежде чем мы сможем сохранить то, что нам нужно указать схема И для этого нам нужно создать Idbobjectstore Анкет

Введение в IdbojectStore

Согласно официальной документации:

Это интерфейс API IndexedDB и представляет хранилище объекта в базе данных

Думайте об этом как о модели в Реляционная база данных , За серьезным исключением, нет id поле. Всякий раз, когда мы хотим сохранить новую запись, а ключ Должен быть предоставлен, тогда магазин объектов будет использовать это ключ Чтобы получить доступ к объекту (например, индексы в массиве), но, если мы действительно хотим имитировать поведение реального Rdb , мы можем сообщить хранилище объекта автоматически генерировать это значение для каждого нового объекта, который мы сохраняем, передавая необязательный Опциональные параметры объект, когда мы сначала создаем магазин объектов.

Когда хранилище объекта будет успешно создано, мы можем использовать экземпляр для создания полей нашей модели, используя CreateIndex (имя, клавиатура, параметры) Метод, каждый параметр является:

• имя : Имя поля
• клавиатура : Клавиатура (имя поля параметры
• : Дополнительный объект, где мы можем указать дополнительные свойства в нашем поле

Остерегайтесь: вы можете выполнить изменения только в контексте версия сделка. Подробнее о транзакциях позже.

Когда мы впервые открываем запрос для создания базы данных, мы назначаем Версия к этому, и потому что эта база данных не существовала раньше, она модернизирован его версия от 0 ¹ к любому номеру мы проходим ( 1 – по умолчанию), a ОБЪЕДИНЕННЫЙ событие уволено 2 ^{И самое главное, а} версия Change Транзакция создана.

Код для создания хранилища объектов с учетом Idbopenrequest Объект заключается в следующем:

dbRequest.onupgradeneeded = event => {
  // We retrieve the instance of the database
  const db = event.target.result;
  const objectStore = db.createObjectStore(dbName, {
    keyPath: "key", // Assign a key field to every record
    autoIncrement: true // The key is given by a key generator in a ordered sequence
  }

  // We then create the fields
  objectStore.createIndex("name", "name");
  // ...
}

Замечательно 👏! Теперь у нас есть наша база данных, заполненная полями (столбцами), но как мы сохраняем (или обновляем или удаляем) любую запись на ней?

Введение в IDBTransaction

Согласно официальной документации:

Это интерфейс IndexedDB API. Он обеспечивает статическую асинхронную транзакцию в базе данных с использованием атрибутов обработчика событий. Все чтение и написание данных выполняется в рамках транзакций

Я думаю, что дальнейшее объяснение не требуется. Чтобы начать (и использовать) транзакцию, мы можем выполнить эти пять шагов:

1. Создать транзакцию через Transaction () Метод в нашей базе данных
2. Установите режим транзакции на любой readonly или читай пиши
3. Доступ к Idbobjectstore Через транзакцию и храните ее
4. Используйте Idbobjectstore Чтобы сделать асинхронный запрос (например, удалить или создать что -то)
5. Определите поведение, когда запрос выполняется
6. Определите поведение, когда транзакция завершена

В коде это будет выглядеть примерно так:

let mode = ""; // readonly or readwrite
// Step 1-2
const transaction = indexedDB.transaction([dbName], mode);
// Step 3
const objectStore = transaction.objectStore(dbName);
// Step 4
// We open up the request through the objectStore object, we will see more on this in the next part
let request;
// Step 5
request.onsuccess = () => console.log("Success!")
// Step 6
transaction.onsuccess = () => console.log("Operation was successful");

Отлично 👏! До этого момента мы можем сделать практически все, что мы хотим с нашими данными, но мы еще не увидели, как мы можем на самом деле получить информацию и использовать ее.

Введение в idbcursorwithvalue

Согласно официальной документации:

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

Думайте об этом как о буквальном курсоре, который может идти в любом направлении (вверх и вниз) через записи.

Чтобы получить экземпляр курсора, мы можем выполнить эти шаги:

1. Возьмите Объектно -магазин экземпляр из базы данных
2. Используйте OpenCursor () на Объектно -магазин , он выполнит Запрос и вернуть новый Idbcursorwithvalue объект
3. Определите поведение, когда запрос успешно выполнен
4. Получите курсор от события, передавшего этот обратный вызов, если это неопределенный тогда нет данных для получения

В коде все будет выглядеть так:

// Steps 1-2
const objectStore = indexedDB.transaction(dbName).objectStore(dbName);
// Step 3
objectStore.openCursor().onsuccess = event => {
  // Step 4
  const cursor = event.target.result;
  if (cursor) {
    // There is at least one record
  else {
    // There is no data or is the end of the table
  }
}

onsuccess Обратный вызов будет запущен для каждой записи на столе.

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

Большое спасибо за чтение! Если у вас есть вопросы или предложения, пожалуйста, оставьте их внизу. Увидимся в следующий раз 👋.

1: Это не точно, а скорее пример, чтобы облегчить понять, почему ОБЪЕДИНЕННЫЙ Событие запускается 2: ОБЪЕДИНЕННЫЙ Событие запускается всякий раз, когда пытается открыть базу данных с версией, выше, чем ее текущая версия, и не только когда база данных это впервые создано

Оригинал: “https://dev.to/devtony101/javascript-building-a-to-do-app-with-the-indexeddb-api-part-1-4382”