Просмотр и изменение данных IndexedDB

Kayce Basques

В этом руководстве показано, как использовать Chrome DevTools для просмотра и изменения данных IndexedDB . Предполагается, что вы знакомы с DevTools. Если нет, см. Начало работы . Также предполагается, что вы знакомы с IndexedDB. Если нет, см. Использование IndexedDB .

Просмотр данных IndexedDB

1. Щелкните вкладку «Приложение» , чтобы открыть панель «Приложение» . Разверните меню IndexedDB , чтобы увидеть, какие базы данных доступны.

   

   Рисунок 1 . Меню ИндексированнойБД

   • примечания — https://mdn.github.io представляет базу данных, где примечания — это имя базы данных, а https://mdn.github.io — источник, который может получить доступ к базе данных.
   • Notes — это хранилище объектов.
   • заголовок и тело являются индексами .

Примечание. Известные ограничения. Сторонние базы данных не видны. Например, если вы используете <iframe> для встраивания объявления на свою страницу, а ваша рекламная сеть использует IndexedDB, данные IndexedDB вашей рекламной сети не будут видны. См. выпуск № 943770 .

1. Щелкните базу данных, чтобы увидеть ее происхождение и номер версии.

   

   Фигура 2 . База данных заметок

2. Щелкните хранилище объектов, чтобы просмотреть его пары «ключ-значение».

   Внимание: данные IndexedDB не обновляются в режиме реального времени. См. раздел Обновление данных IndexedDB .

   

   Рисунок 3 . Хранилище объектов заметок

   • Всего записей — это общее количество пар ключ-значение в хранилище объектов.
   • Значением генератора ключей является следующий доступный ключ. Это поле отображается только при использовании генераторов ключей .

3. Щелкните ячейку в столбце «Значение» , чтобы развернуть это значение.

   

   Рисунок 4 . Просмотр значения IndexedDB

4. Щелкните индекс, например заголовок или тело на рисунке 6 ниже, чтобы отсортировать хранилище объектов в соответствии со значениями этого индекса.

   

   Рисунок 5 . Хранилище объектов, отсортированное в алфавитном порядке по ключу заголовка .

Обновить данные IndexedDB.

Значения IndexedDB на панели «Приложение» не обновляются в режиме реального времени. Нажмите Обновить при просмотре хранилища объектов, чтобы обновить его данные, или просмотрите базу данных и нажмите «Обновить базу данных» , чтобы обновить все данные.

Рисунок 6 . Просмотр базы данных

Редактировать данные IndexedDB

Ключи и значения IndexedDB нельзя редактировать на панели приложения . Однако, поскольку DevTools имеет доступ к контексту страницы, вы можете запускать код JavaScript внутри DevTools, который редактирует данные IndexedDB.

Редактируйте данные IndexedDB с помощью фрагментов

Фрагменты — это способ хранить и запускать блоки кода JavaScript в DevTools. Когда вы запускаете фрагмент, результат записывается в консоль . Вы можете использовать фрагмент для запуска кода JavaScript, который редактирует базу данных IndexedDB.

Рисунок 7 . Использование фрагмента для взаимодействия с IndexedDB

Удалить данные IndexedDB

Удаление пары ключ-значение IndexedDB

1. Просмотр хранилища объектов IndexedDB .

2. Щелкните пару ключ-значение, которую вы хотите удалить. DevTools выделяет его синим цветом, чтобы указать, что он выбран.

   

   Рисунок 8 . Выбор пары ключ-значение для ее удаления

3. Нажмите клавишу «Удалить» или нажмите «Удалить выбранное». .

   

   Рисунок 9 . Как выглядит хранилище объектов после удаления пары ключ-значение

Удалить все пары ключ-значение в хранилище объектов.

1. Просмотр хранилища объектов IndexedDB .

   

   Рисунок 10 . Просмотр хранилища объектов

2. Нажмите Очистить хранилище объектов. .

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

1. Просмотрите базу данных IndexedDB , которую вы хотите удалить.

2. Нажмите Удалить базу данных .

   

   Рисунок 11 . Кнопка «Удалить базу данных»

Удалить все хранилище IndexedDB

1. Откройте панель «Очистить хранилище» .
2. Убедитесь, что флажок IndexedDB включен.

3. Нажмите Очистить данные сайта .

   

   Рисунок 12 . Панель «Очистить хранилище»