Просмотр и редактирование локального хранилища

Кейс Баскс
Kayce Basques
Софья Емельянова
Sofia Emelianova

В этом руководстве показано, как использовать Chrome DevTools для просмотра, редактирования и удаления пар «ключ-значение» localStorage . Локальное хранилище сохраняет данные между сеансами браузера.

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

  1. Откройте DevTools на веб-сайте, который вы хотите проверить.

  2. Перейдите в Application > Storage и разверните Local Storage . Щелкните домен, чтобы просмотреть его пары ключ-значение.

    Пары ключ-значение youtube.com.

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

    Просмотр значения выбранного ключа.

Чтобы вручную обновить пары ключ-значение, нажмите Обновить. Обновите панель действий вверху.

Фильтр пар ключ-значение

Чтобы быстро найти нужную пару ключ-значение, введите в поле фильтра вверху строку, содержащую ключ или значение.

Фильтрация пар «ключ-значение», которые не содержат строку «has».

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

  1. Посмотрите пары ключ-значение localStorage домена . Например, на этой демонстрационной странице .
  2. Дважды щелкните пустую часть таблицы. DevTools создаст новую строку и наведет курсор на столбец Key .
  3. Введите новую пару ключ-значение.

Редактировать ключи или значения localStorage

  1. Просмотр пар ключ-значение localStorage домена . Например, на этой демонстрационной странице .
  2. Дважды щелкните ячейку в столбце «Ключ или значение» , чтобы изменить этот ключ или значение.
  3. Обновите страницу, чтобы подать заявку.

Удалить пары ключ-значение localStorage

  1. Просмотр пар ключ-значение localStorage домена . Например, на этой демонстрационной странице .
  2. Щелкните пару ключ-значение, чтобы выбрать ее.
  3. Нажмите Удалить. Чтобы удалить выбранную пару, нажмите «Удалить» на панели действий вверху. Удаление выбранной пары ключ-значение.
  4. В качестве альтернативы нажмите Очистить все. Очистить все , чтобы удалить все пары.

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

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

  1. В DevTools откройте консоль .
  2. Если вы хотите получить доступ к парам «ключ-значение» localStorage домена, отличного от страницы, на которой вы находитесь, выберите нужный контекст JavaScript в раскрывающемся меню контекста на панели действий вверху.
  3. Запустите выражения localStorage в консоли так же, как вы это делаете в JavaScript.

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