Как посмотреть localstorage в chrome
Как просмотреть или отредактировать localStorage
Я создал расширение Chrome и использую localStorage для хранения данных.
Я обращаюсь к localStorage через «background_page».
Он работает нормально, но как я могу вручную просмотреть его значения? В Firefox вы можете использовать Firebug.
У кого-нибудь есть предложения?
Нажмите на вкладку « Приложение» (ранее «Ресурсы»), и вы увидите содержимое localStorage. Оттуда вы можете добавлять / редактировать / удалять записи ключа / значения вручную.
На OS X ключи: ⌥ + ⌘ + i
Другая комбинация: Ctrl + Shift + i
РЕДАКТИРОВАТЬ: В Chrome 56 это выглядит так:
Я использую Chrome версии 52.0.2743.82 м в настоящее время. В этой последней версии Chrome на данный момент вы можете увидеть значения локального хранилища, запустив «Инструменты разработчика», а затем перейдя на вкладку «Приложение».
Вы можете перейти к chrome: // chrome / extensions и там будет ссылка на вашу фоновую страницу, после запуска которой вы сможете использовать инструменты разработки, чтобы увидеть материал localStorage.
Либо я не понимаю, что здесь пытаются сделать люди, и это не то, чем я занимаюсь, и / или инструменты разработчика Chrome изменились и в этом отношении не работают.
Контент-скрипт моего расширения хранит данные примерно так:
Когда я просматриваю вкладку «Приложение» на фоновой странице расширения и раскрываю «Хранение»> «Локальное хранилище», я вижу свое расширение в списке, но при щелчке по нему не отображаются данные.
Единственное решение, которое я нашел, это запустить его в консоли фоновой страницы:
Это похоже на то, как расширение читает его (за исключением передачи нулевого значения, чтобы получить все ключи вместо имени ключа, чтобы получить только то, что я хочу), и оно работает нормально, просто неудобно каждый раз печатать его. Также странно, что здесь есть все эти ответы, которые не работают для меня.
Я использую Chrome 73.0.3683.103 (Официальная сборка) (64-разрядная версия) в Windows 10. Расширение все еще не распаковано, если это уместно, но это наиболее вероятный момент, когда вы захотите сделать это, то есть в разработке.
LocalStorage на пальцах
Авторизуйтесь
LocalStorage на пальцах
Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.
Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».
Что такое localStorage?
Так выглядит JavaScript объект:
А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.
Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.
Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.
Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку
20–22 декабря, Онлайн, Беcплатно
Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.
Зачем мне нужен localStorage?
LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.
Как мне начать работать с localStorage?
Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.
Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);
Берем определенное значение из хранилища по ключу.
Очищаем все хранилище
Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что — весь код пишем в js-файл.
Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.
Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.
Вместо заключения
Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.
LocalStorage, sessionStorage
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:
Давайте посмотрим, как это работает.
Демо localStorage
Основные особенности localStorage :
Например, если запустить этот код…
…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:
Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.
Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
Доступ как к обычному объекту
Также можно получать/записывать данные, как в обычный объект:
Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:
Перебор ключей
Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?
К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.
Но можно пройти по ним, как по обычным массивам:
Здесь перебираются ключи, но вместе с этим выводятся несколько встроенных полей, которые нам не нужны:
…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :
…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:
Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.
Только строки
Обратите внимание, что ключ и значение должны быть строками.
Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:
Мы можем использовать JSON для хранения объектов:
Также возможно привести к строке весь объект хранилища, например для отладки:
sessionStorage
Свойства и методы такие же, но есть существенные ограничения:
Давайте посмотрим на это в действии.
Запустите этот код…
…И обновите страницу. Вы всё ещё можете получить данные:
Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.
Событие storage
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.
Это позволяет разным окнам одного источника обмениваться сообщениями.
Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.
Итого
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
Задачи
Автосохранение поля формы
Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.
How to view or edit localStorage
I created a Chrome extension and am using localStorage for storing data.
I am accessing localStorage through «background_page».
It works fine but how can I manually view its values? In Firefox you can use Firebug.
Anyone have any suggestions?
5 Answers 5
Click on the Application tab and you will see localStorage’s content. From there you can add/edit/delete the entries manually.
On OS X the keys are: ⌥ + ⌘ + i
Another combination: Ctrl + Shift + i
In Chrome it looks like this:
You can go to chrome://chrome/extensions and there will be a link to your background page that once you launch you can use the Dev Tools to see the localStorage stuff.
I am using chrome Version 52.0.2743.82 m currently. In this lastest version of chrome as of now, you can see the local storage values by launching «Developer Tools» and then looking into «Application» tab.
Either I don’t understand what people here are trying to do, and it’s not what I’m doing, and/or the Chrome developer tools have changed, and are broken in this regard.
My extension’s content-script stores data like this:
When I view the Application tab of the extension’s background page, and expand Storage > Local Storage, I see my extension listed, but clicking on it shows no data.
The only solution I’ve found is to run this in the background page’s console:
That’s similar to how the extension reads it (except passing null to get all keys instead of a key name to get just the one I want) and it works fine, it’s just awkward to type it out every time. It’s also weird that there are all these answers here that don’t work for me.
Работа с LocalStorage на примере
Доступ в браузере к localStorage
Использует или нет сайт встроенное хранилище данных, можно увидеть в консоли разработчика, во вкладке Application / Local Storage, предварительно нажав F12. На скриншоте у сайта booking.com, мы видим какие-то данные в виде характерной для массивов записи (‘key’: ‘value’).
Объект localStorage
Где использовать localStorage
Например, пользователь установил настройки в магазине и при повторном заходе, ему уже не нужно этого делать заново. Если посетитель не досмотрел видео до конца, то продолжить просмотр он может с того самого места, где остановился. Использование технологии localStorage, даёт нам такие возможности.
Размер localStorage
Размер хранилища данных составляет 5 Mb. Этого более, чем достаточно для обслуживания одного домена.
Работа с localStorage
В application появилась эта пара. И более того, при перезагрузке страницы, данные сохраняются. Если добавленный ключ уже существует, то его значение перезапишется на новое.
Следующий метод getItem получит значение ключа.
Для удаления элемента из хранилища, достаточно указать метод removeItem и передать в параметрах ключ.
Как очистить localStorage
Метод clear() очищает все хранилище.
Пользователь также может очистить localStorage, но только в пределах одной сессии, нажав на иконку Clear All. После перезагрузки страницы, все данные снова появятся во вкладке. В этом нет ничего удивительного, ведь через браузер нельзя поменять код сайта. JavaScript заново наполнит хранилище данными.
Пример использования localStorage
В нашей логин форме имеется поле checkbox. Если пользователь при первом заходе на сайт, поставит галочку «Запомнить меня», то при повторных заходах, уже не нужно вводить данные в форму.
Обработчик события отследит, когда построится DOM-дерево. Только после этого начнет выполняться JavaScript код. Первым делом получим инпут и положим его в переменную checkbox. Повесим ещё один обработчик события на инпут и будем отслеживать, когда произойдет событие клика. Пользователь кликнет внутри чекбокса и поставится галочка. Это стандартное поведение чекбокса.
window.addEventListener(‘DOMContentLoaded’, function() <
let checkbox = document.querySelector(‘.rememberMe’);
checkbox.addEventListener(‘click’, function() <
localStorage.setItem(‘isChecked’, ‘true’);
>)
>)
В хранилище localStorage записалась пара (ключ, значение). При каждом заходе пользователя на сайт, поле с чекбоксом всегда будет активным.
Однако в этом коде не хватает проверки. Есть одна проблема. При обновлении страницы галочка пропадает. Пускай визуальное отсутствие галочки не влияет на работу localStorage, но все равно этот косяк надо исправить. Пропишем условие: получим значение onChecked из хранилища и если оно равно true, то мы устанавливаем checkbox в отмеченное положение.
if(localStorage.getItem(‘onChecked’) === ‘true’) <
checkbox.checked = true;
>;
Пропишем код целиком.
window.addEventListener(‘DOMContentLoaded’, function() <
let checkbox = document.querySelector(‘.rememberMe’);
if(localStorage.getItem(‘onChecked’) === ‘true’) <
checkbox.checked = true;
>
checkbox.addEventListener(‘click’, function() <
localStorage.setItem(‘onChecked’, ‘true’);
>);
>);
Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!
Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.
Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления
Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.
Порекомендуйте эту статью друзьям:
Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):
Комментарии ( 0 ):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.
Copyright © 2010-2021 Русаков Михаил Юрьевич. Все права защищены.