JavaScript Academy · Урок

Открытие базы данных

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

«Открытие базы данных» — бесплатный урок JavaScript Academy на CoddyKit. Это урок 1 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения JavaScript Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс JavaScript Academy содержит 4 уроков всего.

Что такое IndexedDB

IndexedDB — встроенная в браузер транзакционная база данных большой ёмкости. В отличие от localStorage (небольшого синхронного хранилища только строк), она хранит структурированные объекты, поддерживает индексы и работает асинхронно.

Открытие базы данных

Открывайте (или создавайте) базу данных с помощью indexedDB.open(name, version). Этот вызов возвращает объект запроса, события которого сообщают об успехе или сбое.

const request = indexedDB.open('notes-db', 1);

События запроса

Запрос на открытие вызывает события, которые Вы обрабатываете:

onsuccess — база данных готова
onerror — открытие не удалось
onupgradeneeded — схему необходимо создать или обновить

request.onsuccess = (e) => {
  const db = e.target.result;
  console.log('database opened');
};
request.onerror = (e) => {
  console.log('open failed:', e.target.error);
};

onupgradeneeded

onupgradeneeded выполняется при первом создании базы данных или увеличении номера её версии. Только здесь можно изменить схему (создать или удалить хранилища объектов и индексы).

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  // create object stores here
};

Хранилища объектов

Хранилище объектов похоже на таблицу: это контейнер записей. Создайте его с помощью db.createObjectStore(name, options) внутри onupgradeneeded.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  db.createObjectStore('notes', { keyPath: 'id' });
};

Путь к ключу

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

db.createObjectStore('users', { keyPath: 'email' });
// Each stored user object must have a unique 'email'.

Ключи с автоинкрементом

Если у объектов нет естественного ключа, позвольте IndexedDB создавать его с помощью autoIncrement: true. Каждая новая запись получает следующее целое число.

db.createObjectStore('logs', {
  keyPath: 'id',
  autoIncrement: true
});
// id is assigned automatically on add().

Проверка существующих хранилищ

Поскольку onupgradeneeded выполняется при каждом повышении версии, защищайте создание с помощью db.objectStoreNames.contains, чтобы избежать ошибок при повторном запуске.

request.onupgradeneeded = (e) => {
  const db = e.target.result;
  if (!db.objectStoreNames.contains('notes')) {
    db.createObjectStore('notes', { keyPath: 'id' });
  }
};

Сохранение ссылки на базу данных

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

let db;
request.onsuccess = (e) => {
  db = e.target.result; // reuse for transactions
};

Обработка заблокированного открытия

Если другая вкладка открыла старую версию, обновление может быть blocked. Прослушивайте событие onblocked и попросите пользователя закрыть другие вкладки.

request.onblocked = () => {
  console.log('Close other tabs to upgrade the database.');
};

Процесс открытия

Открытие IndexedDB выполняется так: вызовите open с именем и версией, создайте схему в onupgradeneeded, затем получите db в onsuccess. После этого можно выполнять транзакции для чтения и записи данных.

Проверка знаний

Проверьте, насколько хорошо Вы поняли открытие базы данных.

Повторение

Вы научились открывать базу данных IndexedDB:

indexedDB.open(name, version) возвращает запрос.
Создавайте хранилища объектов только в onupgradeneeded.
keyPath задаёт первичный ключ, а autoIncrement создаёт ключи автоматически.
Сохраняйте db из onsuccess для последующего использования.
Обрабатывайте onerror и onblocked.

Далее Вы изучите транзакции и операции CRUD.

Часто задаваемые вопросы

Урок «Открытие базы данных» бесплатный?

Да — полный текст урока «Открытие базы данных» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс JavaScript Academy, подпишись на CoddyKit PRO. Курс JavaScript Academy содержит 4 уроков всего.

Чему я научусь в уроке «Открытие базы данных»?

Создавайте базы данных и хранилища объектов. Ты практикуешь JavaScript Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать JavaScript Academy?

Предыдущий опыт не требуется. JavaScript Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 1 из 4.

Сколько времени занимает урок «Открытие базы данных»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке JavaScript Academy?

Да. Каждый урок JavaScript Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к JavaScript Academy