Как просмотреть или отредактировать localStorage

259

Я создал расширение Chrome и использую localStorage для хранения данных.

Я обращаюсь к localStorage через "background_page".

Он работает нормально, но как я могу вручную просмотреть его значения? В Firefox вы можете использовать Firebug.

У кого-нибудь есть предложения?

google-chrome local-storage Джо Доу
источник

Ответы:

270

Это просто. Просто перейдите к инструментам разработчика, нажав F12, затем перейдите на вкладку « Приложение ». В разделе « Хранилище » разверните « Локальное хранилище» . После этого вы увидите все локальное хранилище вашего браузера.

Георгий Гзиришвили
источник
33
В Chrome версии 60 вы не можете изменять или добавлять новые элементы, вам придется делать это через консоль иlocalStorage.setItem('key', 'value')
Джим Ахо
9
В Chrome версии 65 вы можете вручную изменять и добавлять новые элементы. Дважды щелкните под последней парой ключ-значение в списке ключ-значение в приложении> Локальное хранилище, чтобы добавить новое значение.
Роза Перроне
169

Просто откройте Инструменты разработчика , нажавF12 .

Нажмите на вкладку « Приложение» (ранее «Ресурсы»), и вы увидите содержимое localStorage. Оттуда вы можете добавлять / редактировать / удалять записи ключа / значения вручную.

вкладка ресурсов localStorage

На OS X ключи: ⌥+⌘ +i

Другая комбинация: Ctrl+ Shift+i

РЕДАКТИРОВАТЬ: В Chrome 56 это выглядит так:

введите описание изображения здесь

Симона
источник
4
Да, это уже пробовал, но localStorage пуст. Может потому что я загрузил распакованное расширение?
Джо Доу
Это может вам помочь: stackoverflow.com/questions/3598669/…
Simone
3
Симона, я знаю, как установить и прочитать localStorage с помощью JS, но мне нужно вручную отредактировать / удалить его
Джо Доу
Не нужно делать это с JS, есть возможность добавлять / редактировать / удалять записи из пользовательского интерфейса
Simone
17

Я использую Chrome версии 52.0.2743.82 м в настоящее время. В этой последней версии Chrome на данный момент вы можете увидеть значения локального хранилища, запустив «Инструменты разработчика», а затем перейдя на вкладку «Приложение».

Люк П. Иссак
источник
15

Вы можете перейти к chrome: // chrome / extensions и там будет ссылка на вашу фоновую страницу, после запуска которой вы сможете использовать инструменты разработки, чтобы увидеть материал localStorage.

Райан С
источник
Спасибо за ответ @Ryan S, но localStorage пусто, я установил это такlocalStorage['xy'] = JSON.stringify(xy);
Джо Доу
2
В консоли Chrome вы можете сделать это, localStorage.setItem('xy', JSON.stringify(xy))и это установит элемент в localStorage
Ryan S
2
сделать chrome: // chrome-urls /, затем локальное хранилище
khaled_webdev
2

Либо я не понимаю, что здесь пытаются сделать люди, и это не то, чем я занимаюсь, и / или инструменты разработчика Chrome изменились и в этом отношении не работают.

Контент-скрипт моего расширения хранит данные примерно так:

chrome.storage.local.set(packet);

Когда я просматриваю вкладку «Приложение» на фоновой странице расширения и раскрываю «Хранение»> «Локальное хранилище», я вижу свое расширение в списке, но при щелчке по нему не отображаются данные.

Единственное решение, которое я нашел, это запустить его в консоли фоновой страницы:

chrome.storage.local.get(null, function(data) {console.log(data);})

Это похоже на то, как расширение читает его (за исключением передачи нулевого значения, чтобы получить все ключи вместо имени ключа, чтобы получить только то, что я хочу), и оно работает нормально, просто неудобно каждый раз печатать его. Также странно, что здесь есть все эти ответы, которые не работают для меня.

Я использую Chrome 73.0.3683.103 (Официальная сборка) (64-разрядная версия) в Windows 10. Расширение все еще не распаковано, если это уместно, но это наиболее вероятный момент, когда вы захотите сделать это, то есть в разработке.

enigment
источник