Просмотр и изменение локального хранилища с помощью Microsoft Edge DevTools

В этом руководстве описано, как использовать Microsoft Edge DevTools для просмотра, изменения и удаления localStorage пар "ключ-значение".

Просмотр ключей и значений localStorage

  1. Перейдите на вкладку приложение , чтобы открыть панель приложения . Область манифеста отображается по умолчанию.

    Рис. 1

    Область «манифест»
    Область «манифест»

  2. Разверните меню Локальное хранилище .

    Рисунок 2

    В меню " Локальное хранилище " отображаются два домена: https://business.bing.com и https://www.bing.com
    ![Меню «локальное хранилище»][ImageLocalStorageMenu]

  3. Выберите домен, чтобы просмотреть пары "ключ-значение".

    Рисунок3

    localStorageПары "ключ-значение" для https://www.bing.com домена
    ![LocalStorage пары "ключ-значение" для https://www.bing.com домена][ImageLocalStorage]

  4. Выделите строку таблицы, чтобы просмотреть ее значение в представлении под таблицей.

    Рисунок4

    Просмотр значения eventLogQueue_Online ключа
    ![Просмотр значения ключа eventLogQueue_Online][ImageLocalStorageViewer]

Создание новой localStorage пары "ключ-значение"

  1. Просмотр localStorage пар "ключ-значение" домена.

  2. Дважды щелкните пустую часть таблицы. DevTools создает новую строку и нафокусирует указатель мыши на ключевом столбце.

    Рисунок 5

    Пустая часть таблицы для двойного щелчка, чтобы создать новую пару ключ-значение.
    ![Пустая часть таблицы для двойного щелчка, чтобы создать новую пару ключ-значение.][ImageLocalStorageCreate]

Изменение localStorage ключей и значений

  1. Просмотр localStorage пар "ключ-значение" домена.

  2. Дважды щелкните ячейку в столбце " раздел " или " значение ", чтобы изменить этот раздел или значение.

    Рисунок6

    Редактирование localStorage ключа
    ![Редактирование ключа localStorage][ImageLocalStorageEdit]

Удаление localStorage пар "ключ-значение"

  1. Просмотр localStorage пар "ключ-значение" домена.

  2. Выберите пару "ключ-значение", которую вы хотите удалить. DevTools выделит ее синей, чтобы показать, что она выбрана.

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

Удаление всех localStorage пар "ключ-значение" для домена

  1. Просмотр localStorage пар "ключ-значение" домена.

  2. Нажмите Очистить все  Очистить все .

Взаимодействие с localStorage консолью

Так как вы можете запускать JavaScript на консоли, а так как у консоли есть доступ к контекстам JavaScript страницы, взаимодействие с localStorage консольювозможно.

  1. Используйте меню "контексты JavaScript " для изменения контекста JavaScript на консоли , если требуется получить доступ к localStorage парам "ключ-значение" домена, отличного от отображаемой страницы.

    Рисунок7

    Изменение контекста JavaScript консоли
    ![Изменение контекста JavaScript консоли][ImageJSContext]

  2. Выполняйте localStorage выражения на консоли так же, как и в JavaScript.

    Рисунок8

    Взаимодействие с localStorage консолью
    ![Взаимодействие с localStorage из консоли][ImageLocalStorageConsole]

[ImageLocalStorageMenu]: /microsoft-edge/devtools-guide-chromium/media/storage-application-local-storage.msft.png "Рисунок 2: меню "локальное хранилище""
[ImageLocalStorage]: /microsoft-edge/devtools-guide-chromium/media/storage-application-local-storage-view-key-value.msft.png "Рисунок 3: localStorage пары "ключ-значение" для https://www.bing.com домена"
[ImageLocalStorageViewer]: /microsoft-edge/devtools-guide-chromium/media/storage-application-local-storage-view-key-value-selected.msft.png "Рисунок 4: Просмотр значения ключа eventLogQueue_Online"
[ImageLocalStorageCreate]: /microsoft-edge/devtools-guide-chromium/media/storage-application-local-storage-new-key-value.msft.png "Рис. 5: пустая часть таблицы для двойного щелчка, чтобы создать новую пару ключ-значение."
[ImageLocalStorageEdit]: /microsoft-edge/devtools-guide-chromium/media/storage-application-local-storage-edit-key-value.msft.png "Рисунок 6: Редактирование ключа localStorage"
[ImageJSContext]: /microsoft-edge/devtools-guide-chromium/media/storage-console-local-storage.msft.png "Рис. 7: изменение контекста JavaScript консоли"
[ImageLocalStorageConsole]: /microsoft-edge/devtools-guide-chromium/media/storage-console-local-storage-interaction.msft.png "Рисунок 8: взаимодействие с localStorage из консоли"

Примечание

Части этой страницы представляют собой изменения, основанные на работе, созданной и предоставленной компанией Google и использованными в соответствии с условиями, описанными в лицензии Creative Commons 4,0 международная лицензия.
Исходная страница будет найдена здесь и была написана с помощью Kayce Basques \ (технический писатель, Chrome DevTools \ & Lighthouse ).

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