Поделиться через


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

Чтобы просмотреть и изменить данные IndexedDB , используйте средство "Приложение ".

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

  1. Откройте веб-страницу, которая использует IndexedDB в новом окне или вкладке. Вы можете использовать демонстрационное приложение PWAmp.

  2. Чтобы открыть Средства разработки, щелкните веб-страницу правой кнопкой мыши и выберите пункт Проверить. Или нажмите клавиши CTRL+SHIFT+I (Windows, Linux) или COMMAND+OPTION+I (macOS). Откроется devTools.

  3. В devTools на панели действий выберите вкладку Приложение . Если эта вкладка не отображается, нажмите кнопку Дополнительные инструменты (значок ") .

    Панель Манифест обычно открывается по умолчанию:

    Панель манифеста средства

  4. На боковой панели в разделе Хранилище разверните меню IndexedDB , чтобы узнать, какие базы данных доступны:

    Меню IndexedDB

    • (значок базы данных) keyval-store представляет базу данных.

    • (значок хранилища объектов) keyval — это хранилище объектов в базе данных.

  5. keyval-store Выберите базу данных, чтобы просмотреть ее источник, номер версии и другие сведения о ней:

    Сведения о базе данных хранилища ключей в средстве приложения

  6. keyval Щелкните хранилище объектов, чтобы просмотреть пары "ключ-значение":

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

    Заметка: Данные IndexedDB не обновляются в режиме реального времени. Если в хранилище объектов отображаются устаревшие данные, обновите представление хранилища объектов. См . раздел Обновление данных IndexedDB.

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

    Просмотр значения IndexedDB

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

Значения IndexedDB в средстве "Приложение " не обновляются в режиме реального времени.

  • Чтобы обновить данные, просмотрите хранилище объектов и нажмите кнопку Обновить (обновить).

  • Чтобы обновить все данные в базе данных IndexedDB, просмотрите базу данных и щелкните Обновить базу данных:

    Представление базы данных с кнопкой

Изменение данных IndexedDB

Ключи и значения indexedDB не могут изменяться с помощью средства "Приложение ". Однако, так как Средства разработки имеют доступ к контексту страницы, вы можете запустить код JavaScript в средствах разработки, чтобы изменить данные, хранящиеся в базе данных IndexedDB.

Изменение данных IndexedDB с помощью средства консоли

  1. В devTools на панели действий выберите вкладку Консоль .

  2. В средстве Консоли выполните код JavaScript, чтобы изменить данные IndexedDB. Например, чтобы добавить новое значение в keyval хранилище объектов, выполните следующий код:

    let connection = indexedDB.open("keyval-store", 1);
    
    connection.onsuccess = e => {
      const database = e.target.result;
      const transaction = database.transaction("keyval", "readwrite");
      const objectStore = transaction.objectStore("keyval");
      const request = objectStore.add({foo: "bar"}, "new-key");
      request.onsuccess = e => {
        console.log(e.target.result);
      }
    }
    

Изменение данных IndexedDB с помощью фрагментов кода

Фрагменты кода — это способ многократного хранения и выполнения кода JavaScript в средствах разработки. Если вам нужно часто редактировать данные IndexedDB, сохраните их в новом фрагменте, а затем запустите его. Дополнительные сведения см. в статье Запуск фрагментов Кода JavaScript на любой веб-странице.

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

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

Вы можете удалить любой из следующих элементов:

  • Пара "ключ—значение" IndexedDB.
  • Все пары "ключ-значение" в хранилище объектов.
  • База данных IndexedDB.
  • Все хранилище IndexedDB.

Эти параметры описаны ниже.

Удаление пары "ключ—значение" indexedDB

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

  2. Щелкните пару "ключ—значение", которую требуется удалить. DevTools выделяет пару "ключ-значение", чтобы указать, что она выбрана:

    Элемент пары

  3. Нажмите Deleteили нажмите кнопку Удалить выбранный (удалить выбранный значок):

    Кнопка удаления значения ключа на панели инструментов представления хранилища объектов

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

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

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

    Кнопка очистки хранилища объектов на панели инструментов представления хранилища объектов

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

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

  2. Щелкните Удалить базу данных.

    Кнопка

Удаление всего хранилища IndexedDB

  1. На боковой панели средства "Приложение " щелкните Хранилище.

  2. Прокрутите вниз до флажков Хранилище и убедитесь, что установлен флажок IndexedDB .

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

    Панель Хранилища с различными флажами хранилища и кнопкой

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Кейс Баски.

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.