ВебмастерскаяСекреты вебмастера

Использование IndexDB в JavaScript

Использование IndexDB в JavaScript

Доброго времени суток! Сегодня мы поговорим с Вами, о том, что такое IndexedDB в JavaScript.

IndexedDB (Indexed Database) — это встроенная база данных в браузере, предоставляющая JavaScript-интерфейс для хранения и работы со структурированными данными. Она предназначена для хранения более крупных объемов данных по сравнении с тем, что может предоставить localStorage или sessionStorage. Также IndexedDB поддерживает индексированный доступ к данным, что позволяет эффективно осуществлять запросы и фильтрацию.

Вот простой пример использования IndexedDB для хранения и получения данных:


// Открываем или создаем базу данных под названием myrusakov_db, версии 1
const request = indexedDB.open('myrusakov_db', 1);

// Обработчик события на случай изменения версии базы данных или для первоначальной инициализации
// таблиц с данными
request.onupgradeneeded = function(event) {
  const db = event.target.result;

  // Создаем хранилище объектов (таблицу) с именем "users" и указываем поле "id" как ключ
  const objectStore = db.createObjectStore('users', { keyPath: 'id' });

  // Создаем индекс для поля "name", "unique" - false
  objectStore.createIndex('name_idx', 'name', { unique: false });

  // Добавляем начальные данные
  objectStore.add({ id: 1, name: 'Михаил Русаков', age: 33 });
  objectStore.add({ id: 2, name: 'Михаил Русаков', age: 20 });
};

// Обработчик, который срабатывает при успешном открытии базы данных
request.onsuccess = function(event) {
  const db = event.target.result;

  // Получаем транзакцию для чтения данных
  const transaction = db.transaction(['users'], 'readonly');
  const objectStore = transaction.objectStore('users');

  // Получаем объект по ключу (id)
  const getRequest = objectStore.get(1);

  getRequest.onsuccess = function(event) {
    const userData = event.target.result;
    console.log('Пользователь:', userData);
  };

  // Завершаем транзакцию
  transaction.oncomplete = function() {
    console.log('Транзакция завершена.');
  };
};

// Обработчик ошибок открытия базы данных
request.onerror = function(event) {
  console.error('Ошибка открытия базы данных:', event.target.error);
};

В примере выше:

  • Мы открываем или создаем базу данных с именем 'myrusakov_db' и версией 1.
  • Если база данных создается впервые или ее версия изменяется, выполняется обработчик onupgradeneeded. Здесь мы создаем хранилище объектов (таблицу) users с индексом name.
  • После успешного открытия базы данных мы получаем транзакцию для чтения данных и используем ее для получения объекта из хранилища users.
  • Завершаем транзакцию после выполнения операции.
  • IndexedDB предоставляет более продвинутые возможности для работы с данными, включая индексы, транзакции, запросы по диапазону и т.д. Это позволяет эффективно хранить и извлекать большие объемы структурированных данных в веб-приложениях.

    Кстати, с помощью JavaScript можно создавать очень сложные приложения, которые, часто, не отличить от обычных настольных приложений. Об этом и многом другом из мира JavaScript Вы можете узнать из моего видеокурса Программирование на JavaScript с Нуля до Гуру 2.0

    Источник

    Статьи по теме

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.

    Back to top button