Быстрое, но полное руководство по индексам и хранению данных в браузерах

Автор оригинала: Flavio Copes.

Введение в indexeddb.

IndexedDB – одно из возможностей хранения, введенные в браузеры в течение многих лет. Это магазин Key/Value (база данных NoSQL), считающаяся Окончательное решение для хранения данных в браузерах Отказ

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

Это Поддерживается на всех современных браузерах Отказ

Он поддерживает транзакции, версию и дает хорошую производительность.

Внутри браузера мы также можем использовать:

Печенье : может провести очень небольшое количество строк
Веб-хранилище (или DOM хранилище), термин, который обычно определяет локальную и сеанс заседанию, две магазины ключа/значения. SESSSTORGESTORAGE, не сохраняет данные, которые очищаются, когда сеанс заканчивается, а локальная табличка держит данные по всему сессию

Местное/сеансное хранилище имеет недостаток ограничения на небольшом (и непоследовательном) размере с браузерами, предлагающими 2 МБ до 10 МБ пространства на сайт.

В прошлом у нас тоже было Web SQL , обертка вокруг SQLite, но теперь это устаревшие И не поддерживается на некоторых современных браузерах, это никогда не было признанным стандартом и поэтому его не следует использовать, хотя 83% пользователей имеют эту технологию на своих устройствах в зависимости от того, что я могу использовать Отказ

Хотя вы можете технически создавать несколько баз данных на сайт, вы вообще Создать одну одну базу данных и внутри этой базы данных вы можете создать Многократные объектные магазины Отказ

База данных Частный домен Таким образом, любой другой сайт не может получить доступ к другому сайту IndexedDB.

Каждый магазин обычно содержит набор вещи С который может быть

строки
числа
объекты
массива
даты

Например, у вас может быть магазин, который содержит сообщения, другой, который содержит комментарии.

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

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

С момента появления Обещания В ES6 и последующем хода API на использование обещаний API IndexedDB кажется немного Старая школа Отказ

Пока в этом нет ничего плохого, во всех примерах, которые я объясню, я буду использовать IndexedDB Обещанная библиотека By Jake Archibald, который является крошечным слоем поверх appi indexeddb, чтобы облегчить использование.

Эта библиотека также используется на всех примерах на веб-сайте Google Developers относительно IndexedDB

Создать базу данных IndexedDB

Самый простой способ использовать Unpkg Добавляя это в заголовок страницы:

Перед использованием API IndexedDB Всегда убедитесь, что вы проверяете наличие поддержки в браузере, хотя это широко доступно, вы никогда не знаете, какой браузер использует пользователь:

(() => {
  'use strict'

  if (!('indexedDB' in window)) {
    console.warn('IndexedDB not supported')
    return
  }

  //...IndexedDB code
})()

Как создать базу данных

Использование OpenDB () :

(async () => {
  //...

  const dbName = 'mydbname'
  const storeName = 'store1'
  const version = 1 //versions start at 1

  const db = await openDB(dbName, version, {
    upgrade(db, oldVersion, newVersion, transaction) {
      const store = db.createObjectStore(storeName)
    }
  })
})()

Первые 2 параметра являются именем базы данных и Verson. Третий параметр, который является необязательным, является объектом, который содержит функцию Вызывается только в том случае, если номер версии выше текущей установленной версии базы данных Отказ В корпусе функций вы можете обновить структуру (магазины и индексы) БД.

Добавление данных в магазин

Добавление данных, когда магазин создан, инициализация его

Вы используете поставить Способ хранения объектов, но сначала нам нужна ссылка на него, которую мы можем получить от db.createobjectStore. () Когда мы создаем это.

При использовании поставить Значение является первым аргументом, ключ второй. Это потому, что если вы укажете Клавиатура При создании хранилища объектов вам не нужно вводить имя ключа на каждый запрос () PUT (), вы можете просто написать значение.

Это заполняет магазин0 Как только мы создадим это:

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

  const db = await openDB(dbName, version,{
    upgrade(db, oldVersion, newVersion, transaction) {
      const store = db.createObjectStore(storeName)
      store.put('Hello world!', 'Hello')
    }
  })
})()

Добавление данных, когда магазин уже создан, используя транзакции

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

Для этого используйте ссылку на dbpromise объект, который мы получили при звонке Opendb и беги:

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

  const db = await openDB(/* ... */)

  const tx = db.transaction(storeName, 'readwrite')
  const store = await tx.objectStore(storeName)

  const val = 'hey!'
  const key = 'Hello again'
  const value = await store.put(val, key)
  await tx.done
})()

Получать данные из магазина

Получение одного предмета из магазина: Get ()

const key = 'Hello again'
const item = await db.transaction(storeName).objectStore(storeName).get(key)

Получение всех предметов из магазина: GetAll ()

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

const items = await db.transaction(storeName).objectStore(storeName).getAllKeys()

Получите все значения, хранящиеся

const items = await db.transaction(storeName).objectStore(storeName).getAll()

Удаление данных из IndexedDB

Удаление базы данных, магазин объектов и данных

Удалить целую базу данных IndexedDB

const dbName = 'mydbname'
await deleteDB(dbName)

Чтобы удалить данные в магазине объектов

Мы используем транзакцию:

(async () => {
  //...

  const dbName = 'mydbname'
  const storeName = 'store1'
  const version = 1

  const db = await openDB(dbName, version, {
    upgrade(db, oldVersion, newVersion, transaction) {
      const store = db.createObjectStore(storeName)
    }
  })

  const tx = await db.transaction(storeName, 'readwrite')
  const store = await tx.objectStore(storeName)

  const key = 'Hello again'
  await store.delete(key)
  await tx.done
})()

Мигрировать из предыдущей версии базы данных

Третий (необязательный) параметр OpenDB () Функция – это объект, который может содержать Обновление Функция Вызывается только в том случае, если номер версии выше текущей установленной версии базы данных Отказ В этом теле функции вы можете обновить структуру (магазины и индексы) дБ:

const name = 'mydbname'
const version = 1
openDB(name, version, {
  upgrade(db, oldVersion, newVersion, transaction) {
    console.log(oldVersion)
  }
})

В этом обратном вызове вы можете проверить, с какой версии пользователь обновляет и выполняет некоторые операции соответственно.

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

(async () => {
  //...
  const dbName = 'mydbname'
  const storeName = 'store0'
  const version = 1

  const db = await openDB(dbName, version, {
    upgrade(db, oldVersion, newVersion, transaction) {
      switch (oldVersion) {
        case 0: // no db created before
          // a store introduced in version 1
          db.createObjectStore('store1')
        case 1:
          // a new store in version 2
          db.createObjectStore('store2', { keyPath: 'name' })
      }
      db.createObjectStore(storeName)
    }
  })
})()

Уникальные ключевые ключи

CreateObjectStore () Как вы можете видеть в Случай 1 Принимает второй параметр, указывающий индексную клавишу базы данных. Это очень полезно, когда вы храните объекты: поставить () Вызывы не нужен второй параметр, но может просто принять значение (объект), и ключ будет сопоставлен с свойством объекта, имеющего это имя.

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

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

db.createObjectStore('notes', { autoIncrement: true })

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

Проверьте, существует ли магазин

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

const storeName = 'store1'

if (!db.objectStoreNames.contains(storeName)) {
  db.createObjectStore(storeName)
}

Удаление от indexeddb.