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

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

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

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

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

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

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

   

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

   

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

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

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

   

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

   

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

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

   

Обновление данных 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

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 Attribution 4.0.