Где находится локальное хранилище браузера
Обновлено: 21.11.2024
На заре Интернета сохранение данных было возможно только на сервере. В настоящее время с помощью LocalStorage мы можем хранить данные о клиентах, таких как браузеры и мобильные приложения, без связи с серверным приложением.
Сохранение данных в браузере с помощью файлов cookie
Что такое LocalStorage?
У данных в LocalStorage нет срока действия. Его можно удалить с помощью JavaScript или очистив кеш браузера.
Теперь, когда мы знаем, что такое LocalStorage, давайте воспользуемся его API для управления данными в браузере.
Как использовать LocalStorage
Мы можем использовать следующие методы глобального объекта localStorage для управления данными на стороне клиента:
| Метод | Описание |
|---|---|
| setItem() | Добавить ключ/значение в LocalStorage |
| getItem() | Получить значение из LocalStorage |
| removeItem() | Удалить элемент по его ключу |
| clear()< /td> | Удалить все элементы из LocalStorage |
| key() | Получить ключ элемента из LocalStorage |
setItem()
Используйте функцию setItem() для сохранения элемента в LocalStorage. Эта функция принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, оба должны быть строками.
В консоли вашего браузера давайте добавим элемент в наше локальное хранилище:
получитьItem()
Используйте функцию getItem() для извлечения данных из LocalStorage. Эта функция принимает в качестве аргумента ключ, который использовался при сохранении данных.
В вашей консоли давайте извлечем и напечатаем значение, которое было сохранено ранее с помощью setItem() :
Ваша консоль должна вывести "JavaScript".
удалитьЭлемент()
Используйте функцию removeItem(), чтобы удалить один элемент из LocalStorage. Вам необходимо указать ключ элемента, который вы хотите удалить, в качестве аргумента.
Попробуйте это в своей консоли, чтобы удалить данные, сохраненные с помощью setItem():
Консоль выводит "null", так как getItem() возвращает null всякий раз, когда не может получить элемент.
очистить()
Чтобы удалить все данные, хранящиеся в LocalStorage, используйте функцию clear():
Функция key() позволяет нам получить ключ элемента, сохраненного в LocalStorage, по его индексу. Браузер создает целочисленный индекс для каждого элемента, добавленного в LocalStorage.
Поскольку мы не создаем этот индекс, мы не должны использовать его для прямого извлечения ключей. Однако мы можем использовать эту функцию, чтобы получить все ключи, хранящиеся в LocalStorage:
Используя свойство length LocalStorage, мы перебираем каждый созданный индекс, чтобы распечатать все ключи, которые мы сохранили в LocalStorage. Затем мы можем использовать эти ключи с getItem() для извлечения всех сохраненных данных.
Теперь, когда мы рассмотрели все функции управления данными в браузере пользователя, давайте рассмотрим особый случай сохранения сложных объектов вместо строковых данных.
Сохранение объектов в LocalStorage
Бесплатная электронная книга: Git Essentials
Ознакомьтесь с нашим практическим руководством по изучению Git, включающим передовые практики, общепринятые стандарты и памятку. Перестаньте гуглить команды Git и на самом деле изучите их!
LocalStorage может использовать только строки для своих ключей и значений. Если мы попытаемся сохранить любой другой тип данных, он преобразует его в строку перед сохранением. Это может привести к неожиданному поведению, когда мы хотим сохранить объекты JavaScript.
Давайте создадим объект пользователя в консоли браузера и сохраним его в LocalStorage:
Теперь setItem() преобразует объект человека в строку. Когда мы извлекаем человека следующим образом:
Консоль нашего браузера покажет следующее:
Преобразование объекта JavaScript в строку дает [object Object] . По общему признанию, возвращать строку, которая указывает только на то, что объект был сохранен, бесполезно.
Чтобы правильно хранить объекты JavaScript в LocalStorage, нам сначала нужно преобразовать наш объект в строку JSON.
Для этого мы используем встроенную функцию JSON.stringify(). Результирующая строка этой функции будет содержать все свойства нашего объекта JSON. Мы сохраняем вывод этой функции при использовании setItem() .
Давайте сохраним объект человека после его преобразования в строку:
Чтобы получить эти данные как объект, нам нужно сделать две вещи. Во-первых, нам нужно использовать getItem(), чтобы получить его из LocalStorage. Затем нам нужно преобразовать строку JSON в объект JavaScript.
Начнем с того, что возьмем элемент из LocalStorage:
Теперь преобразуйте строку LocalStorage в объект с помощью JSON.parse() и зарегистрируйте ее в консоли браузера:
Выполнение этого кода даст вам следующий результат:
Обратите внимание на разницу в цвете в консоли при первой регистрации строки и при регистрации объекта. Мы также регистрируем свойство name человека, чтобы гарантировать, что свойства объекта по-прежнему доступны.
Теперь, когда у нас есть стратегия расширения использования LocalStorage за пределы строк, давайте обсудим передовые методы его использования.
Когда использовать LocalStorage
LocalStorage обеспечивает базовое сохранение данных на вашем веб-сайте. Он обычно используется для хранения данных, которые пользователю было бы удобно видеть, даже если браузер был обновлен. Например, многие формы сохраняют введенные пользователем данные в LocalStorage до тех пор, пока они не будут отправлены.
Статические веб-сайты обычно используют LocalStorage для хранения пользовательских настроек, таких как тема пользовательского интерфейса. Без веб-сервера и базы данных для сохранения пользовательских настроек LocalStorage позволяет им продолжать использовать ваш веб-сайт со своими настройками.
Однако LocalStorage не следует использовать для больших объемов данных. Помимо ограничения в 5 МБ, которого может быть недостаточно для приложений, интенсивно использующих данные, большие объемы данных снижают производительность при использовании LocalStorage.
Все функции LocalStorage являются синхронными операциями. Поэтому, если вы сохраняете или извлекаете большой блок данных, JavaScript должен завершить эту операцию LocalStorage, прежде чем он сможет выполнить другой код.
Помните, что при сохранении больших объектов JSON увеличивается стоимость производительности. Функции JSON.stringify() и JSON.parse() также являются синхронными. Они будут блокировать выполнение JavaScript до тех пор, пока они не будут завершены.
Никогда не храните конфиденциальную информацию в LocalStorage. Сюда входят пароли, ключи API, токены аутентификации, такие как JWT, и финансовая информация, например номера кредитных карт, и многие другие.
Помните, что каждый файл JavaScript, загруженный в ваш домен, имеет доступ к LocalStorage. Если вредоносный код JavaScript добавлен вами или вашими зависимостями, они могут получить пользовательские данные или токены, которые вы используете для аутентификации с помощью API.
Всегда храните конфиденциальные данные на сервере.
Заключение
LocalStorage – это хранилище данных, доступное в браузерах. Данные хранятся в виде пар строк ключ/значение, и каждый домен имеет доступ к своему LocalStorage.
При сохранении объектов JavaScript обязательно правильно преобразуйте их в строку с помощью JSON.stringify() перед сохранением. По мере извлечения данных преобразуйте их в объект с помощью JSON.parse() .
При использовании LocalStorage избегайте обработки больших объемов данных, так как это может снизить производительность, поскольку его функции синхронны. Самое главное, убедитесь, что в LocalStorage не хранятся конфиденциальные данные пользователей или приложений.
Объекты веб-хранилища localStorage и sessionStorage позволяют сохранять пары ключ/значение в браузере.
Что интересно в них, так это то, что данные сохраняются при обновлении страницы (для sessionStorage) и даже при полном перезапуске браузера (для localStorage). Мы увидим это очень скоро.
Оба объекта хранилища предоставляют одни и те же методы и свойства:
- setItem(key, value) — сохранить пару ключ/значение.
- getItem(key) — получить значение по ключу.
- removeItem(key) — удалить ключ вместе с его значением.
- clear() — удалить все.
- key(index) — получить ключ по заданной позиции.
- length – количество сохраненных элементов.
Как видите, это похоже на коллекцию карт ( setItem/getItem/removeItem ), но также разрешает доступ по индексу с помощью key(index) .
Давайте посмотрим, как это работает.
демонстрация localStorage
- Общий доступ ко всем вкладкам и окнам из одного источника.
- Срок действия данных не ограничен. Он остается после перезагрузки браузера и даже перезагрузки ОС.
Например, если вы запустите этот код…
…И закрыть/открыть браузер или просто открыть ту же страницу в другом окне, тогда получится так:
У нас должен быть только один и тот же источник (домен/порт/протокол), URL-адрес может быть другим.
Местное хранилище совместно используется всеми окнами с одним и тем же источником, поэтому, если мы установим данные в одном окне, изменение станет видимым в другом.
Объектный доступ
Мы также можем использовать простой объектный способ получения/установки ключей, например:
Это разрешено по историческим причинам и в основном работает, но обычно не рекомендуется, потому что:
Если ключ сгенерирован пользователем, это может быть что угодно, например length или toString , или другой встроенный метод localStorage . В этом случае getItem/setItem работают нормально, а объектно-подобный доступ не работает:
Есть событие хранения, оно срабатывает, когда мы изменяем данные. Это событие не происходит при объектном доступе. Мы увидим это позже в этой главе.
Зацикливание клавиш
Как мы видели, методы обеспечивают функциональность "получить/установить/удалить по ключу".Но как получить все сохраненные значения или ключи?
К сожалению, объекты хранилища не являются повторяемыми.
Один из способов — перебрать их как массив:
Еще один способ — использовать for key в цикле localStorage, как мы это делаем с обычными объектами.
Он перебирает ключи, но также выводит несколько встроенных полей, которые нам не нужны:
…Поэтому нам нужно либо отфильтровать поля из прототипа с проверкой hasOwnProperty:
…Или просто получите «собственные» ключи с помощью Object.keys, а затем переберите их, если необходимо:
Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.
Только строки
Обратите внимание, что и ключ, и значение должны быть строками.
Если это любой другой тип, например число или объект, он автоматически преобразуется в строку:
Мы можем использовать JSON для хранения объектов:
Также можно преобразовать в строку весь объект хранения, например. в целях отладки:
Хранилище сеансов
Объект sessionStorage используется гораздо реже, чем localStorage .
Свойства и методы те же, но они гораздо более ограничены:
- Хранилище sessionStorage существует только на текущей вкладке браузера.
- Другая вкладка с той же страницей будет иметь другое хранилище.
- Однако он используется всеми окнами iframe на одной вкладке (при условии, что они происходят из одного и того же источника).
Давайте посмотрим на это в действии.
… Затем обновите страницу. Теперь вы все еще можете получить данные:
… Но если вы откроете ту же страницу на другой вкладке и повторите попытку там, приведенный выше код вернет null , что означает «ничего не найдено».
Это именно потому, что sessionStorage привязан не только к источнику, но и к вкладке браузера. По этой причине sessionStorage используется экономно.
Событие хранения
Когда данные обновляются в localStorage или sessionStorage , срабатывает событие хранилища со свойствами:
- key — ключ, который был изменен ( null, если вызывается .clear()).
- oldValue — старое значение ( null, если ключ добавлен недавно).
- newValue – новое значение ( null, если ключ удален).
- url — URL-адрес документа, в котором произошло обновление.
- storageArea — объект localStorage или sessionStorage, в котором произошло обновление.
Важно следующее: событие срабатывает для всех оконных объектов, где доступно хранилище, кроме того, который его вызвал.
Представьте, что у вас есть два окна с одним и тем же сайтом в каждом. Таким образом, localStorage является общим для них.
Возможно, вы захотите открыть эту страницу в двух окнах браузера, чтобы протестировать приведенный ниже код.
Если оба окна прослушивают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом.
Обратите внимание, что событие также содержит: event.url – URL-адрес документа, в котором были обновлены данные.
Кроме того, event.storageArea содержит объект хранилища — событие одинаково как для sessionStorage, так и для localStorage , поэтому event.storageArea ссылается на тот, который был изменен. Мы можем даже захотеть вернуть что-то в него, чтобы «отреагировать» на изменение.
Это позволяет различным окнам из одного источника обмениваться сообщениями.
Современные браузеры также поддерживают API широковещательного канала — специальный API для межоконной связи из одного и того же источника. Он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки, которые заполняют этот API на основе localStorage и делают его доступным везде.
Обзор
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить ключ/значение в браузере.
- И ключ, и значение должны быть строками.
- Ограничение составляет 5 МБ+, зависит от браузера.
- Они не имеют срока действия.
- Данные привязаны к источнику (домен/порт/протокол).
- setItem(key, value) — сохранить пару ключ/значение.
- getItem(key) — получить значение по ключу.
- removeItem(key) — удалить ключ вместе с его значением.
- clear() — удалить все.
- key(index) – получить номер ключа index .
- length – количество сохраненных элементов.
- Используйте Object.keys, чтобы получить все ключи.
- Мы обращаемся к ключам как к свойствам объекта, в этом случае событие хранения не запускается.
- Срабатывает при вызовах setItem, removeItem, clear.
- Содержит все данные об операции ( key/oldValue/newValue ), URL-адрес документа и объект хранения storageArea .
- Срабатывает для всех оконных объектов, имеющих доступ к хранилищу, кроме того, который его создал (на вкладке для sessionStorage, глобально для localStorage).
Задачи
Автосохранение поля формы
Создайте поле textarea, которое автоматически сохраняет свое значение при каждом изменении.
Таким образом, если пользователь случайно закроет страницу и откроет ее снова, он обнаружит, что незаконченный ввод остался на месте.
В веб-хранилище веб-приложения могут хранить данные локально в браузере пользователя.
Веб-хранилище определяется по происхождению (по домену и протоколу). Все страницы из одного источника могут хранить и получать доступ к одним и тем же данным.
Поддержка браузера
Числа в таблице указывают на первую версию браузера, которая полностью поддерживает веб-хранилище.
API Веб-хранилище 4.0 8.0 3.5 4.0 11.5 Объекты веб-хранилища HTML
Веб-хранилище HTML предоставляет два объекта для хранения данных на клиенте:
- window.localStorage — хранит данные без даты истечения срока действия
- window.sessionStorage — сохраняет данные за один сеанс (данные теряются при закрытии вкладки браузера)
Перед использованием веб-хранилища проверьте поддержку браузером localStorage и sessionStorage:
if (typeof(Storage) !== "undefined") <
// Код для localStorage/sessionStorage.
> else <
// Извините ! Нет поддержки веб-хранилища..
>Объект localStorage
Объект localStorage хранит данные без даты истечения срока действия. Данные не будут удалены при закрытии браузера и будут доступны на следующий день, неделю или год.
Пример
// Получить
document.getElementById("result").innerHTML = localStorage.getItem("lastname");- Создайте пару имя/значение localStorage с name="lastname" и value="Smith"
- Получить значение "lastname" и вставить его в элемент с помощью
Пример выше можно было бы написать так:
// Сохраняем
localStorage.lastname = "Smith";
// Извлекаем
document.getElementById("result").innerHTML = localStorage.lastname;Синтаксис для удаления элемента localStorage "lastname" следующий:
Примечание. Пары имя/значение всегда хранятся в виде строк. Не забудьте преобразовать их в другой формат, когда это необходимо!
В следующем примере подсчитывается, сколько раз пользователь нажал кнопку. В этом коде строка значения преобразуется в число, чтобы можно было увеличить счетчик:
Пример
if (localStorage.clickcount) <
localStorage.clickcount = Number(localStorage.clickcount) + 1;
> else <
localStorage.clickcount = 1;
>
document.getElementById("result").innerHTML = "Вы нажали кнопку " +
localStorage .clickcount + " раз(а)";Объект sessionStorage
Объект sessionStorage аналогичен объекту localStorage, за исключением того, что он хранит данные только для одного сеанса. Данные удаляются, когда пользователь закрывает определенную вкладку браузера.
В следующем примере подсчитывается, сколько раз пользователь нажимал кнопку в текущем сеансе:
Где хранятся sessionStorage и localStorage на клиентском компьютере?
Не могли бы вы указать мне путь?4 ответа 4
Файрфокс
Firefox сохраняет localstorage в файле webappsstore.sqlite в папке profile.
Firefox (Windows XP):
Firefox (Windows Vista и выше):
Firefox для Linux:
Firefox на Mac:
Хром
Chrome хранит данные в отдельных файлах в каталоге локального хранилища.
Chrome для Windows:
Chrome в Linux:
Chrome на Mac:
Интернет-обозреватель:
Я немного не уверен, но думаю, что это поможет
Опера
Как сказал OammieR:
или, как сказал Кевин Хакансон:
Источники
Мой собственный компьютер Ubuntu 14.10 с Firefox и Chrome
В моей среде путь к локальному хранилищу для IE 11 Windows 10: %UserProfile%\AppData\LocalLow\Microsoft\Internet Explorer\DOMStore; Windows Server 2019: %LocalAppData%\Microsoft\Internet Explorer\DOMStore Путь хранится в реестре: HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Internet Settings\5.0\LowCache\Extensible Cache\DOMStore\CachePath
LcalStorage и хранилище сеансов хранятся в соответствии с конкретными путями браузера (как у нас для файлов cookie). Кроме того, он ограничен песочницей приложения. Таким образом, только домен, который их устанавливает, может читать или получать к ним доступ.
И снова помните, что только пользователь может контролировать истечение срока хранения.
Данные Opera (версия 12.14 для Windows 7) находились в папке C:\Users\Administrator\AppData\Local\Opera\Opera\pstorage\
Файл psindex.dat содержал указатель к фактическим файлам данных. Я посетил TodoMVC и тест quirksmode HTML5 — хранилище, чтобы сохранить данные.
Тестовая страница quirksmode позволяла интерактивно использовать API-интерфейсы localstorage, поэтому я эффективно выполнил следующий код:
Opera, по-видимому, кодирует base64 строки Unicode JavaScript в файле pstorage\00\0F\00000000.
Читайте также: