Как использовать IndexedDB для хранения локальных данных для вашего веб-приложения

Если вы хотите вилить этот проект, код и учебник доступен на Гадость .

Если вы заинтересованы в видеопрослевой версии этого урока, ознакомьтесь с ссылкой ниже. Вы можете следовать вместе с кодом в этом блоге. (Видео совсем необязательно, каждый шаг и инструкция покрыта посту блога.)

1. Что такое indexeddb?
2. Важные условия
3. Как использовать indexeddb
4. Просмотр вашей базы данных
5. Обновление и удаление данных
6. Ограничения
7. Дальнейшее обучение
8. Упаковка

Что такое indexeddb?

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

Если вы просто ищете самый простой возможный способ хранить некоторые данные на стороне пользователей, которые будут выдержать через браузер обновлять и закрываются, то вам может быть лучше, начиная с простых Местное хранение API. Локальное хранилище поддерживает до 5 МБ данных с простыми парными парами, такими как объекты JavaScript.

Однако, если вы заинтересованы в изучении гораздо более устойчивого и богатого методом хранения на стороне клиента, который поддерживает многие из той же функций, что и реальная полноценная система баз данных – тогда indexedDB может быть правильным выбором для вас.

IndexedDB поддерживается в большинстве современных браузеров и позволяет хранить до 50% бесплатного места для жесткого диска пользователя (до того, как браузер начнет сбросить данные). Чтобы лучше понять ограничения для хранения и места с IndexedDB MDN имеет Отличный ресурс Отказ

Важные условия

База данных

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

Схема

Схема вашей базы данных относится к форме ваших данных. Например, мы будем использовать базу данных, которая отслеживает Автомобили В нашем примере. Есть бесконечные разные предметы информации, которую вы могли себе представить, что относится к автомобилям: цвет, изготовление, модель, состояние, отделка, вин, год и т. Д.

Наша схема определяет, какая из этих свойств отслеживается и хранится в нашей базе данных. Так что в нашем примере мы используем только цвет и сделать Отказ У нас также есть ID Значение, которое служит способом идентификации объектов в нашей базе данных.

Показатель

Индекс В терминологии базы данных похоже на индекс, который вы использовали в конце книги. Это в основном карта одного набора значений на другой набор.

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

Концепция точно такая же для компьютеров. При взгляде на огромную базу данных, без какого-либо индекса, ваш поиск начнется в самом начале и посмотрите на абсолютно все, пока он не найдет, что он ищет. Добавление Индекс Создаю структуру в памяти, которая делает эти поиски быстрее и проще. Индекс принимает место в памяти, поэтому их часто считают компромиссом пространства против скорости. В большинстве случаев этот компромисс стоит.

Наиболее распространенное использование индекса в базе данных находится на Первичный ключ Что является чем-то уникальным (например, идентификационный номер) о предмете, хранящемся в вашей базе данных. Для автомобилей это может быть VIN, для книг ISBN и т. Д. И т. Д.

Сделка

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

Чтобы понять, почему необходимы транзакции, наиболее распространенным примером является передача денег между счетами в базе данных банка. Операция передачи включает в себя оба Удалить деньги с одного аккаунта и Добавить деньги другому. Если Добавить деньги Операция терпит неудачу по какой-либо причине, вам также нужен Удалить деньги Операция, чтобы потерпеть неудачу, иначе вы получите довольно неприятный сценарий, где деньги просто «ушли».

Курсор

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

Как использовать indexeddb

// 1
const indexedDB =
  window.indexedDB ||
  window.mozIndexedDB ||
  window.webkitIndexedDB ||
  window.msIndexedDB ||
  window.shimIndexedDB;

if (!indexedDB) {
  console.log("IndexedDB could not be found in this browser.");
}

// 2
const request = indexedDB.open("CarsDatabase", 1);

1. IndexedDB может быть потенциально упоминается разными именами в зависимости от того, какой браузер вы используете. К счастью, у всех нас есть одинаковый API, поэтому это просто перейдет через список всех возможностей до тех пор, пока он не найдет тот, который существует и сохраняет его в вашу переменную IndexedDB. Если никто не найден, сообщение будет отправлено в журнал, а остальная часть кода не удалась.

2. Делает «открытый» запрос в базу данных Версия 1 Отказ Первый параметр – это имя, которое вы хотите вызвать дБ, а второй параметр – это версия. Если вы решите обновить структуру позже, вы можете увеличить этот номер, чтобы убедиться, что все пользователи используют последнюю версию схемы.

Далее нам нужно слушать разные возможные События которые могут возникнуть, когда сделан открытый запрос. Возможные события – Успех , Ошибка . и Обновление Отказ Давайте начнем с обработки случая ошибки:

Событие ошибки

request.onerror = function (event) {
  console.error("An error occurred with IndexedDB");
  console.error(event);
};

Наиболее вероятная ошибка, которую вы можете столкнуться, это если вы запускаете браузер в Частный или инкогнито моды IndexedDB может не поддерживаться. Обязательно отключите эти режимы, если вы используете IndexedDB.

Обновленное событие

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

Всякий раз, когда это происходит, вам необходимо определить форму базы данных. Итак, мы сделаем это здесь:

request.onupgradeneeded = function () {
  //1
  const db = request.result;

  //2
  const store = db.createObjectStore("cars", { keyPath: "id" });

  //3
  store.createIndex("cars_colour", ["colour"], { unique: false });

  // 4
  store.createIndex("colour_and_make", ["colour", "make"], {
    unique: false,
  }); 
};

Мы сломаем его вниз по линии, чтобы понять каждую часть:

1. Результатом запроса является сам объект базы данных. Мы внутри OnupGradeNeeded Событие, поэтому мы можем предположить, что база данных существует, в противном случае OneRror Функция сработала бы.

2. IndexedDB работает с концепцией Объектные магазины Отказ Это, по сути, имена коллекций данных. Вы можете иметь столько из них, сколько вам нравится в одной базе данных. Думать о них как столы или коллекции Если вы использовали другие базы данных с этими условиями. Клавиатура Имя поля на объекте, который indexedDB будет использовать для его идентификации. Обычно это уникальный номер.

   Вы также можете добавить Автоинкремент: правда Чтобы он установил уникальный идентификатор вручную, что вам не нужно ставить себя. Первый товар, который вы вставляете, имел бы ID 0, то второй товар и ID из 1, и так далее.

   Мы собираемся использовать автомобили на примере, поэтому я назвал мой объектный магазин машины .

3. Добавление Индексы Позволяет нам искать внутреннюю часть нашего магазина объектов по конкретным терминам, помимо только значения, определенного как Клавиатура Отказ Этот индекс позволит нам искать автомобильные объекты по их цвет Собственность (простите на канадском написании).

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

Теперь, когда мы создали схема Мы готовы добавить данные и запросы, чтобы найти его. Это можно сделать, как только база данных открыта, которая будет подтверждена, когда Успех события триггеры.

request.onsuccess = function () {
  console.log("Database opened successfully");

  const db = request.result;

  // 1
  const transaction = db.transaction("cars", "readwrite");

  //2
  const store = transaction.objectStore("cars");
  const colourIndex = store.index("cars_colour");
  const makeModelIndex = store.index("colour_and_make");

  //3
  store.put({ id: 1, colour: "Red", make: "Toyota" });
  store.put({ id: 2, colour: "Red", make: "Kia" });
  store.put({ id: 3, colour: "Blue", make: "Honda" });
  store.put({ id: 4, colour: "Silver", make: "Subaru" });

  //4
  const idQuery = store.get(4);
  const colourQuery = colourIndex.getAll(["Red"]);
  const colourMakeQuery = makeModelIndex.get(["Blue", "Honda"]);

  // 5
  idQuery.onsuccess = function () {
    console.log('idQuery', idQuery.result);
  };
  colourQuery.onsuccess = function () {
    console.log('colourQuery', colourQuery.result);
  };
  colourMakeQuery.onsuccess = function () {
    console.log('colourMakeQuery', colourMakeQuery.result);
  };

  // 6
  transaction.oncomplete = function () {
    db.close();
  };
};

1. Для выполнения любой операции на нашей БД мы должны создать транзакция Отказ Транзакция может быть одной операцией или несколькими операциями, которые все должны преуспеть, иначе ни один из них не будет. Далее мы добавим четыре «автомобили» в нашу базу данных один за другим, но если какая-либо из этих вложений не удалось по какой-либо причине, то все четыре из них не удаются, потому что они случаются в этой одной транзакции, которую мы создали.

2. Здесь нам нужно получить ссылку на наш объектный магазин, который содержит автомобили. Мы также получаем ссылку на наши индексы. Это просто только для получения ссылок на значения, которые мы создали в базе данных в предыдущем разделе.

3. поставить Метод в магазине объектов – это то, как мы добавляем данные в нашу базу данных. На основе схемы, которую мы создали Мы добавим кучу объектов (автомобилей). ID, который я ему дал, это просто уникальный номер, вы также можете использовать Автоинцемент Значение, описанное ранее при создании магазина объекта, чтобы избежать необходимости установить это значение вручную.

4. Это наши вопросы. Вы всегда можете запросить предмет непосредственно со значением вашего Клавиатура Как у нас здесь на первой строке. На нашей второй линии мы используем Геталл Способ, который вернет массив с каждым результатом, который он находит. Мы ищем против наших cars_colour Индекс для «красного». Мы должны ожидать найти два результатах. Окончательная линия поиска по одному результату против нашего составного индекса для любого транспортного средства с цветом «синего» и изготовления «HONDA».

5. Это Успех Обработчики событий, они будут стрелять, когда запрос заканчивается и запускает любой код внутри них. Они не будут стрелять до Результат Значение заполнено на запросе, поэтому безопасно проверять его, так как мы выполняем в этих функциях, войдя на консоль.

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

Если вы возьмете каждый из вышеуказанных кодов (каждый блок образец в примерах в файл .js файл и запустить его в браузере (с помощью приватных/инкогнито режимов) ваши результаты будут выглядеть. Примите к сведению каждая из зарегистрированных значений, соответствующих тому, что мы запросили.

Просмотр вашей базы данных

Браузеры делают его тривиально просто для просмотра содержимого вашего магазина. Сначала откройте консоль разработчиков с F12 Отказ

На Chrome вы найдете его под Приложение -> Хранение -> Indexeddb Отказ

На Firefox это под Хранение -> Индексирован БД Отказ

Обновление и удаление данных

Обновлять

Сначала вы хотите получить данные, которые вы планируете обновить с Получить а затем используйте поставить Метод в магазине для обновления существующей записи. Поставить Метод «вставки или обновление» в том, что он либо перезаписывает существующие данные, либо вставляет новые данные, если оно не существует.

const subaru = store.get(4);

subaru.onsuccess= function () {
  subaru.result.colour = "Green";
  store.put(subaru.result);
}

Это обновит цвет серебряной Subaru в вашей базе данных до зеленого цвета.

Удалять

Данные в IndexedDB могут быть удалены с API, похожим на то, как оно запрашивается. Самый простой метод – удалить запись напрямую по известному ключу:

const deleteCar = store.delete(1);

deleteCar.onsuccess = function () {
  console.log("Red Toyota has been removed");
};

Если вы не знаете ключ и хотите удалить на основе значения одного из ваших индексов, вы можете сделать это тоже:

const redCarKey = colourIndex.getKey(["Red"]);

redCarKey.onsuccess = function () {
  const deleteCar = store.delete(redCarKey.result);

  deleteCar.onsuccess = function () {
    console.log("Red car has been removed");
  };
};

(Если вы хотите попробовать их с первоначальным образцом проекта, вы можете вставить эти фрагменты кода непосредственно перед этой строкой:)

transaction.oncomplete = function () {

Ваш результат будет:

Ограничения

Есть пара ограничения, чтобы быть в курсе при использовании IndexedDB.

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

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

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

Дальнейшее обучение

Есть еще больше для indexedDB, чем покрывается этим руководством этого новичка. Например, если вы намереваетесь хранить большие объемы данных, потенциально больше, чем некоторые пользователи, смогут хранить в память с одним запросом, вы будете заинтересованы в концепции курсоры .

Оба JavaScript.Info и MDN обложка индексаDDB чрезвычайно углубляется, проверьте их, если вы хотите пойти глубже с IndexedDB:

• Indexeddb. на javascript.info.
• IndexedDB на MDN

Упаковка

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

• Как создать и опубликовать библиотеку компенсации реагирования

• Запуск локального веб-сервера

• Eslint.

• Красивее

• Варить

• Реагирование и JSX.

• WebPack: основы

• WebPack: погрузчики, оптимизация и анализ пучка

• WebPack: DevServer, React & Teadercript

Для большего количества учебных пособий следуйте за мной @eagleson_alex в Твиттере

Оригинал: “https://dev.to/alexeagleson/how-to-use-indexeddb-to-store-data-for-your-web-application-in-the-browser-1o90”