Как посмотреть localstorage в chrome

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

Для просмотра, изменения и удаления пар «ключ—значение» localStorage используйте средство «Приложение «.

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

Перейдите на вкладку Приложение , чтобы открыть средство «Приложение «. Панель манифеста отображается по умолчанию.
Разверните меню Локальное хранилище .
Щелкните домен, чтобы просмотреть пары «ключ-значение».
Щелкните строку таблицы, чтобы просмотреть значение в средстве просмотра под таблицей.

Создание новой пары «ключ—значение» localStorage

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

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

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

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

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

Удаление пар «ключ—значение» localStorage

Просмотрите localStorage пары «ключ—значение» домена.
Щелкните пару «ключ—значение», которую требуется удалить. DevTools выделяет его синим цветом, чтобы указать, что он выбран.
Нажмите Delete или щелкните Удалить выбранный ().

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

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

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

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

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

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

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

Как и где хранятся данные в localStorage?

Насколько я понимаю, localStorage — это просто объект-свойство глобального объекта Window, поэтому интересует собственно механизм хранения данных, как это происходит и где хранятся данные: в каком-то файле, или в некой локальной базе данных? И где их можно найти, минуя консоль браузера?

Отслеживать
задан 13 июн 2016 в 7:58
Romanzhivo Romanzhivo
807 2 2 золотых знака 12 12 серебряных знаков 28 28 бронзовых знаков
зависит от реализации, вы хотите узнать для какого-то конкретного браузера?
13 июн 2016 в 8:00
@Grundy да, например, для Хрома?
13 июн 2016 в 8:01
судя по этому ответу — sqlite файлики
13 июн 2016 в 8:15
Есть еще ответ. Там несколько браузеров
13 июн 2016 в 8:39
Да, похоже на то, спасибо!
13 июн 2016 в 8:43

1 ответ 1

Сортировка: Сброс на вариант по умолчанию

Firefox

firefox хранит localstorage в файле webappsstore.sqlite в каталоге с текущим профилем.

Firefox (Windows XP):

C:\Documents and Settings\\Application Data\Mozilla\Firefox\Profiles\\webappsstore.sqlite

Firefox (Windows Vista and above):

C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\\webappsstore.sqlite

%APPDATA%\Mozilla\Firefox\Profiles\\webappsstore.sqlite

Firefox on linux:

~/.mozilla/firefox//webappsstore.sqlite

Firefox on mac:

~/Library/Application Support/Firefox/Profiles//webappsstore.sqlite

~/Library/Mozilla/Firefox/Profiles//webappsstore.sqlite

Chrome

chrome сохраняет в нескольких файлах внутри каталога Local Storage .

Chrome on windows:

%LocalAppData%\Google\Chrome\User Data\Default\Local Storage\

Chrome on linux:

~/.config/google-chrome/Default/Local Storage/

Chrome on mac:

~/Library/Application Support/Google/Chrome//Local Storage/

~/Library/Application Support/Google/Chrome/Default/Local Storage/

Internet explorer:

я не очень уверен, но, думаю, примерно так:

%userprofile%\AppData\LocalLow\Microsoft\Internet Explorer\DOMStorage

Opera

по словам OammieR:

C:\Users\Administrator\AppData\Roaming\Opera\Opera\sessions\autosave.win

или по словам Kevin Hakanson:

C:\Users\Administrator\AppData\Local\Opera\Opera\pstorage\

источники

https://stackoverflow.com/questions/7079075/where-does-firefox-store-javascript-html-localstorage
https://superuser.com/questions/507536/where-does-google-chrome-save-localstorage-from-extensions
http://www.chromium.org/user-experience/user-data-directory

Редактор localStorage в вашем браузере

«Локальное хранилище» (localStorage) — это аналог cookies в браузерах. То есть место в браузере, где можно хранить данные и они не сотрутся от перезагрузки страницы. Его размер составляет примерно 5-10 мегабайт. В него можно записать любое количество переменных в виде «ключ»-«значение». Значение обязательно должно быть строкой.

В большинстве браузеров существуют средства разработки. И зачастую они позволяют просматривать и изменять значения в локальном хранилище. Для демонстрации этих средств рассмотрим задачу. Допустим, что нам надо изменить сохранённое значение, но делать это через языки программирования (к примеру, JavaScript или PHP) довольно долго и трудоёмко. Хотелось бы наглядно увидеть значение и изменить без перезагрузки страницы и ввода кода.

Как открыть средства разработки?

Если вы работаете через браузер FireFox или Chrome, то откройте страницу сайта, на которой происходит работа с «cookies» и «localStorage», и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.

В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.

Теперь необходимо перейти в закладку «Хранилище». В ней выбрать закладку «Локальное хранилище» и нужный домен, на который записывались интересующие записи. Двойным кликом на нужную ячейку можно изменить «ключ» или «значени». Если кликнуть правой кнопкой мыши на строку, то будет вызвано меню, в котором можно удалить выбранные строки или добавить новые:

LocalStorage, sessionStorage

Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.

Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.

Но ведь у нас уже есть куки. Зачем тогда эти объекты?

В отличие от куки, объекты веб-хранилища не отправляются на сервер при каждом запросе. Именно поэтому мы можем хранить гораздо больше данных. Большинство современных браузеров могут выделить как минимум 5 мегабайтов данных (или больше), и этот размер можно поменять в настройках.
Ещё одно отличие от куки – сервер не может манипулировать объектами хранилища через HTTP-заголовки. Всё делается при помощи JavaScript.
Хранилище привязано к источнику (домен/протокол/порт). Это значит, что разные протоколы или поддомены определяют разные объекты хранилища, и они не могут получить доступ к данным друг друга.

Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:

setItem(key, value) – сохранить пару ключ/значение.
getItem(key) – получить данные по ключу key .
removeItem(key) – удалить данные с ключом key .
clear() – удалить всё.
key(index) – получить ключ на заданной позиции.
length – количество элементов в хранилище.

Как видим, интерфейс похож на Map ( setItem/getItem/removeItem ), но также позволяет получить доступ к элементу по индексу – key(index) .

Давайте посмотрим, как это работает.

Демо localStorage

Основные особенности localStorage :

Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.

Например, если запустить этот код…

localStorage.setItem('test', 1);

…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:

alert( localStorage.getItem('test') ); // 1

Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.

Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.

Доступ как к обычному объекту

Также можно получать/записывать данные, как в обычный объект:

// установить значение для ключа localStorage.test = 2; // получить значение по ключу alert( localStorage.test ); // 2 // удалить ключ delete localStorage.test;

Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:

let key = 'length'; localStorage[key] = 5; // Ошибка, невозможно установить length

Перебор ключей

Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?

К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.

Но можно пройти по ним, как по обычным массивам:

for(let i=0; i: $`); >

Другой способ – использовать цикл, как по обычному объекту for key in localStorage .

Здесь перебираются ключи, но вместе с этим выводятся несколько встроенных полей, которые нам не нужны:

// bad try for(let key in localStorage) < alert(key); // покажет getItem, setItem и другие встроенные свойства >

…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :

for(let key in localStorage) < if (!localStorage.hasOwnProperty(key)) < continue; // пропустит такие ключи, как "setItem", "getItem" и так далее >alert(`$: $`); >

…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:

let keys = Object.keys(localStorage); for(let key of keys) < alert(`$: $`); >

Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.

Только строки

Обратите внимание, что ключ и значение должны быть строками.

Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:

localStorage.user = ; alert(localStorage.user); // [object Object]

Мы можем использовать JSON для хранения объектов:

localStorage.user = JSON.stringify(); // немного позже let user = JSON.parse( localStorage.user ); alert( user.name ); // John

Также возможно привести к строке весь объект хранилища, например для отладки:

// для JSON.stringify добавлены параметры форматирования, чтобы объект выглядел лучше alert( JSON.stringify(localStorage, null, 2) );

sessionStorage

Объект sessionStorage используется гораздо реже, чем localStorage .

Свойства и методы такие же, но есть существенные ограничения:

sessionStorage существует только в рамках текущей вкладки браузера.

Другая вкладка с той же страницей будет иметь другое хранилище.
Но оно разделяется между ифреймами на той же вкладке (при условии, что они из одного и того же источника).

Давайте посмотрим на это в действии.

Запустите этот код…

sessionStorage.setItem('test', 1);

…И обновите страницу. Вы всё ещё можете получить данные:

alert( sessionStorage.getItem('test') ); // после обновления: 1

…Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null , что значит «ничего не найдено».

Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.

Событие storage

Когда обновляются данные в localStorage или sessionStorage , генерируется событие storage со следующими свойствами:

key – ключ, который обновился ( null , если вызван .clear() ).
oldValue – старое значение ( null , если ключ добавлен впервые).
newValue – новое значение ( null , если ключ был удалён).
url – url документа, где произошло обновление.
storageArea – объект localStorage или sessionStorage , где произошло обновление.

Важно: событие срабатывает на всех остальных объектах window , где доступно хранилище, кроме того окна, которое его вызвало.

Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.

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

Теперь, если оба окна слушают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом окне.

// срабатывает при обновлениях, сделанных в том же хранилище из других документов window.onstorage = event => < // можно также использовать window.addEventListener('storage', event =>< if (event.key != 'now') return; alert(event.key + ':' + event.newValue + " at " + event.url); >; localStorage.setItem('now', Date.now());

Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.

Также event.storageArea содержит объект хранилища – событие одно и то же для sessionStorage и localStorage , поэтому event.storageArea ссылается на то хранилище, которое было изменено. Мы можем захотеть что-то записать в ответ на изменения.

Это позволяет разным окнам одного источника обмениваться сообщениями.

Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.

Итого