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

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

Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.

На данный момент этот блок не поддерживается, но мы не забыли о нём! Наша команда уже занята его разработкой, он будет доступен в ближайшее время.

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

Что такое localStorage?

Так выглядит JavaScript объект:

var myCar =

А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.

< "firstName": "Иван", "lastName": "Иванов", "address": < "streetAddress": "Московское ш., 101, кв.101", "city": "Ленинград", "postalCode": 101101 >, "phoneNumbers": [ "812 123-1234", "916 123-4567" ] > 

Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.

Вечерний обзор IT-новостей 13 ноября

Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.

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

Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.

Кстати, вы должны знать как localStorage работает с доменами. Для каждого домена ваш браузер создает свой объект localStorage, и редактировать или просматривать его можно только на этом домене. Например, с домена mydomain-1.com нельзя получить доступ к localStorage вашего mydomain-2.com .

Зачем мне нужен localStorage?

LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.

Как мне начать работать с localStorage?

Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.

Метод который добавляет в localStorage новый ключ со значением (а если такой ключ уже существует, то перезаписывает новым значением). Пишем, например, localStorage.setItem(‘myKey’, ‘myValue’);

Берем определенное значение из хранилища по ключу.

Очищаем все хранилище

Сейчас вы можете открыть вкладку с localStorage вашего браузера и самостоятельно потренироваться записывать и извлекать данные из этого хранилища. Если что — весь код пишем в js-файл.

//Добавляем или изменяем значение: localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue" //Выводим его в консоль: var localValue = localStorage.getItem('myKey'); console.log(localValue); //"myValue" //удаляем: localStorage.removeItem("myKey"); //очищаем все хранилище localStorage.clear() То же самое, только с квадратными скобками: localStorage["Ключ"] = "Значение" //установка значения localStorage["Ключ"] // Получение значения delete localStorage["Ключ"] // Удаление значения 

Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.

//создадим объект var obj = < item1: 1, item2: [123, "two", 3.0], item3:"hello" >; var serialObj = JSON.stringify(obj); //сериализуем его localStorage.setItem("myKey", serialObj); //запишем его в хранилище по ключу "myKey" var returnObj = JSON.parse(localStorage.getItem("myKey")) //спарсим его обратно объект 

Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.

try < localStorage.setItem('ключ', 'значение'); >catch (e) < if (e == QUOTA_EXCEEDED_ERR) < alert('Превышен лимит'); >> 

Вместо заключения

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

Следите за новыми постами по любимым темам

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

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

This guide shows you how to use Chrome DevTools to view, edit, and delete localStorage key-value pairs. Local storage saves data across browser sessions.

# View localStorage keys and values

1. Open DevTools on the website you want to inspect.
2. Navigate to Application >Storage and expand Local Storage. Click a domain to view its key-value pairs.
3. To preview the value below the table, select a pair.

To manually refresh the key-value pairs, click Refresh in the action bar at the top.

# Filter key-value pairs

To quickly find a key-value pair you need, type into the filter box at the top a string that either the key or value contains.

# Create a new localStorage key-value pair

1. View the domain’s localStorage key-value pairs. For example, on this demo page.
2. Double-click the empty part of the table. DevTools creates a new row and focuses your cursor in the Key column.
3. Enter a new key-value pair.

# Edit localStorage keys or values

1. View a domain’s localStorage key-value pairs. For example, on this demo page.
2. Double-click a cell in the Key or Value column to edit that key or value.
3. Refresh the page to apply.

# Delete localStorage key-value pairs

1. View a domain’s localStorage key-value pairs. For example, on this demo page.
2. Click a key-value pair to select it.
3. Click Delete in the action bar at the top to remove the selected pair.
4. Alternatively, click Clear all to remove all pairs.

# Interact with localStorage from the Console

Since you can run JavaScript in the Console, and since the Console has access to the page’s JavaScript contexts, it’s possible to interact with localStorage from the Console.

1. In DevTools, open the Console.
2. If you want to access the localStorage key-value pairs of a domain other than the page you’re on, select the JavaScript context you need from the context drop-down menu in the action bar at the top.
3. Run your localStorage expressions in the Console, the same as you would in your JavaScript.

Updated on Tuesday, July 4, 2023 • Improve article

Table of contents

• View localStorage keys and values
• Filter key-value pairs
• Create a new localStorage key-value pair
• Edit localStorage keys or values
• Delete localStorage key-value pairs
• Interact with localStorage from the Console

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

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

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

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

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

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

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