Как посмотреть localstorage в chrome
Перейти к содержимому

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

  • автор:

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

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

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

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

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

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

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

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

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

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

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

Удалить выбранный

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

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

очистить все

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

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

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

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

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

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

LocalStorage в JavaScript: что такое и как работает

На заре Интернета сервер был единственным способом для хранения данных. В современных браузерах нам стало доступно хранилище localStorage , которое позволяет сохранить небольшие данные в формате “ключ — значение”.

В этой статье мы разберемся как работает и используется localStorage в JavaScript. Для всех наших примеров мы будем использовать браузер Google Chrome.

В конце, мы создадим небольшой проект, чтобы понять, как работает localStorage на практике.

Что такое localStorage?

LocalStorage — это по сути небольшая база данных, которая доступна в любом браузере. Благодаря localStorage , веб-приложения могут использовать данные, которые хранятся локально на устройстве пользователя без ограничения срока жизни.

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

Информация в localStorage сохраняется только в браузере пользователя на том устройстве, которое он изначально использовал для доступа к сайту. То есть вся сохраненная информация привязывается к конкретному браузеру. Пользователи не смогут получить доступ к сохраненным данным, если они повторно посетят тот же сайт, используя другой браузер или другое устройство.

Отличие localStorage от sessionStorage

Помимо localStorage , в браузере есть еще один способ хранить информацию под названием sessionStorage , с помощью которого данные сохраняются только для одной сессии (вкладки). Хранилище sessionStorage автоматически очищается после закрытия вкладки.

LocalStorage: максимальный объем данных

LocalStorage позволяет хранить около 5 МБ данных, что несомненно является большим преимуществом. Для сравнения, максимальный размер файла cookie составляет 4 КБ.

Где находится localStorage?

Самый простой способ увидеть как физически выглядит хранилище localStorage — это открыть вкладку Application внутри так называемых Инструментов Разработчика браузера (Google Chrome).

localStorage

Данная вкладка, помимо local storage, содержит и другие разделы для работы с cookies, кэшем приложения, а также с изображениями, шрифтами и стилями.

Важно отметить, что браузер создает отдельный объект localStorage для каждого домена. Таким образом, редактирование и просмотр данных localStorage для домена stackdev.blog доступно только с этого домена.

LocalStorage setItem(): cохранить данные

В JavaScript доступен набор методов для работы с объектом localStorage . Для записи данных в local storage используется метод setItem() :

1localStorage.setItem('ключ','наше значение');

Данный код записывает в хранилище данных наши ключ и значение в строчном формате.

LocalStorage getItem(): получить данные

Метод getItem() используется для получения данных из хранилища localStorage :

1сonst data = localStorage.getItem('ключ');
2
3 console.log(data);
4 // "наше значение"

LocalStorage removeItem(): удалить данные

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

1localStorage.removeItem('ключ');
2сonst data = localStorage.getItem('ключ');
3
4 console.log(data);
5 // null

Как очистить localStorage?

Метод clear() позволяет полностью очистить весь объект локального хранилища для текущего домена. Это не затронет объекты localStorage других доменов.

1localStorage.clear();

LocalStorage length: узнать количество полей в хранилище

Чтобы узнать сколько полей (или ключей с данными) сейчас хранится в объекте localStorage текущего домена, можно использовать свойство length .

1console.log(localStorage.length);
2 // 0

LocalStorage key(): получить данные по индексу ключа

Все ключи в localStorage хранятся в порядке их добавления. Индексное значение ключа, который был добавлен в хранилище первым будет 0 и так далее. Мы можем использовать метод key() , чтобы получить ключ по его индексу.

1localStorage.setItem('car', 'BMW')
2 console.log(localStorage.key(0));

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

1const storageLength = localStorage.length;
2
3 for (let i = 0; i storageLength; i++)
4 console.log(
5 localStorage.getItem(localStorage.key(i))
6 );
7 >

Local Storage использует только строчный тип данных

Любой объект, который мы решим записать в хранилище localStorage , будет автоматически преобразован в строку. То есть браузер возьмет наш объект и применит к нему метод toString() .

1const car = brand: 'bmw', year: 2023>;
2
3 console.log(car.toString())
4 // "[object Object]"

То есть, если мы попробуем указать объект car в качестве значения при записи в LocalStorage — то в хранилище запишется некорректное значение.

1const car = brand: 'bmw', year: 2023>;
2 localStorage.setItem('car', car);
3
4 const data = localStorage.getItem('car');
5
6 console.log(data)
7 // "[object Object]"

Чтобы корректно записать массивы или объекты в localStorage , их сначала необходимо преобразовать в строчный формат, например используя метод JSON.stringify() .

1const car = brand: 'bmw', year: 2023>;
2 const carString = JSON.stringify(car);
3
4 console.log(carString);
5 // ''
6
7 localStorage.setItem('car', carString);

Также при получении массива или объекта из localStorage потребуется сделать обратное преобразование с помощью метода JSON.parse() :

1const data = localStorage.getItem('car');
2 const carParsed = JSON.parse(data);
3
4 console.log(carParsed);
5 // Object

LocalStorage: когда использовать?

Сохранение данных в онлайн формах

Есть несколько ситуаций, когда localStorage может сильно облегчить жизнь как пользователю так и разработчику.

Например, при заполнении длинных онлайн форм у пользователя может пропасть связь и все ранее заполненные данные пропадут.

В этом случае localStorage можно использовать для сохранения данных полей формы, по мере их заполнения. Заполненные данные никуда не пропадут.

После восстановления связи пользователь сможет продолжить заполнение формы.

Общие настройки личного кабинета

Еще одним примером использования localStorage может быть сохранение настроек каких-то элементов личного кабинета пользователя. Например, в одном из проектов приходилось сохранять расположение колонок и установленные фильтры пользователя для отображения данных в таблице.

Есть только 2 случая, когда данные могут быть стерты из localStorage :

  • Был превышен лимита по размеру данных.
  • Хранилище принудительно очищено с помощью кода или самим пользователем через вкладку Application.

Проект

В этом видео мы создадим небольшой проект, где будем сохранять данные нашей формы в localStorage. При презарузке страницы, заполненные данные будут оставаться на экране.

Типы данных в JavaScript (8 типов + примеры)

Async Await в Javascript (как работает и примеры)

Популярные статьи

  • Задачи JavaScript для начинающих
  • Типы данных в JavaScript
  • Как проверить объект JavaScript на пустоту?
  • Обработчики Событий в JS
  • Деструктуризация в Javascript
  • Массивы Javascript: перебирающие методы
  • Операторы Spread и Rest в Javascript
  • Объект Date: Текущая Дата и Время в Javascript
  • Переменные JavaScript var, let и const

Как и где хранятся данные в 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

Как найти и увидеть данные хранящиеся в chrome.storage(local или sync)?

Бодаюсь с chrome.storage. Записываю и считываю данные в хранилище согласно приведенных примеров. Всё норм.
А вот где в DevTools можно визуально посмотреть список всех хранящихся в chrome.storage переменных? Я DevTools-панель перебрал, но ничего не нашел ¯\_(ツ)_/¯ может я слепой?

  • Вопрос задан более двух лет назад
  • 891 просмотр

1 комментарий

Средний 1 комментарий

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *