Локальное хранилище браузера где находится
Иногда можно столкнуться с необходимостью сохранять какие-то данные, доступ к которым бы сохранялся и после перезапуска браузера.
На ум сразу приходят Cookies, но куки удобны не всегда. Что же делать в этом случае? Ответ прост: воспользоваться локальным хранилищем браузера ( Local Storage ). Что же представляет из себя данное хранилище? Local Storage представляет собой список строк ключ/значение. Работать с локальным хранилищем невероятно просто. Local Storage – это не база данных, поэтому вам не придется учить язык запросов SQL. Вся работа сводится к нескольким методам, которые позволяют сохранять, удалять, изменять данные.
Откройте консоль своего браузера F12 ( Chrome, Firefox ) GTRL+SHIFT+I ( Opera ) и перейдите на вкладку Application .
В основной панели расположена таблица с двумя полями: key и value . В поле key сохраняется имя ключа, а в поле value значение ключа.
Для работы с локальным хранилищем в JavaScript есть объект LocalStorage, у которого, в свою очередь, есть методы:
key () – данный метод позволят проверить наличие ключа. Метод принимает строковый параметр (имя ключа). Если такой ключ существует, метод возвращает его имя, если же ключ не найден, то вернётся null;
getItem () – метод читает значение ключа. Принимает один строковый параметр (имя ключа) и возвращает значение, если ключ существует, а если ключ с указанным именем отсутствует, вернет undefined;
setItem () – метод позволяет установить значение ключа. Принимает два строковых параметра: имя ключа и значение. Если ключа с указанным именем не существует, ключ будет создан, а если существует, то значение ключа будет заменено на новое.
removeItem () – метод удаляет ключ. Принимает имя ключа и, если такой ключ существует, он будет удалён.
clear () – метод очищает таблицу полностью. Все данные будут удалены.
Один из наших читателей прислал статью с рассказом о HTML5 LocalStorage в браузерах. Передаём ему слово.
Я постарался написать самое простое и понятное руководство по использованию технологии localStorage. Статья получилась совсем небольшой, в силу того, что и сама технология и средства работы с ней не несут ничего сложного. Для старта вам достаточно чуть-чуть знать JavaScript. Итак, уделите этой статье 10 минут и вы смело сможете добавить себе в резюме строчку «умею работать с localStorage».
Что такое localStorage?
Так выглядит JavaScript объект:
А так выглядит JSON. Почти так же как обычный js-объект, только все свойства должны быть заключены в кавычки.
Чтобы понять, что такое localStorage, просто представьте, что где-то у вас в браузере встроен такой объект, которым мы можем пользоваться. При этом данный объект не очищает значения, которые мы туда запишем, если мы перезагрузим страницу или даже совсем закроем браузер.
Если говорить языком JavaScript, то localStorage это свойство глобального объекта браузера (window). К нему можно обращаться как window.localStorage или просто localStorage.
Еще стоит сказать, что у браузера существует клон localStorage, который называется sessionStorage. Их разница только в том, что последний хранит данные только для одной вкладки (сессии) и просто очистит свое пространство как только мы закроем вкладку
3–4 декабря, Онлайн, Беcплатно
Давайте посмотрим на него вживую. Например, в Google Chrome вам надо открыть DevTools (F12), перейти на вкладку «Resourses» и на левой панели вы увидите localStorage для данного домена и все значения, что оно содержит.
Зачем мне нужен localStorage?
LocalStorage нужен только для одного — хранить определенные данные между сессиями пользователя. Можно придумать тысячу и одну вещь, которую можно хранить в локальном хранилище браузера. Например, браузерные игры, которые используют его как сохраненку, или записать момент, на котором пользователь остановился при просмотре видео, различные данные для форм и т.д.
Как мне начать работать с localStorage?
Работа с localStorage очень напоминает работу с объектами в JavaScript. Существует несколько методов для работы с ним.
Берем определенное значение из хранилища по ключу.
Очищаем все хранилище
Также хочется отметить, что localStorage отлично работает и с вложенными структурами, например, объектами.
Вы также должны знать, что браузеры выделяют 5мб под localStorage. И если вы его превысите — получите исключение QUOTA_EXCEEDED_ERR. Кстати, c его помощью можно проверять есть ли в вашем хранилище еще место.
Вместо заключения
Мне бы хотелось, чтобы из этой небольшой статьи разработчики сделали для себя простой вывод, что данная технология уже вовсю может использоваться у вас на проектах. У нее хорошая стандартизация и отличная поддержка, которая со временем только развивается.
LocalStorage и sessionStorage – это веб-хранилища, находящиеся в браузере пользователя и предназначенные для хранения данных.
Хранение информации в этих объектах осуществляется в формате «ключ-значение». Ключ и значение – это всегда строки.
Т.е., по сути, каждое хранилище представляет собой вот такой объект:
Если в качестве значения указать не строку, а какой-то другой тип данных, например, объект, то он будет, перед тем как туда записан, автоматически преобразован в строку (т.е. так как будто мы для него явно вызвали метод toString() ).
Таким образом, в localStorage и sessionStorage :
- данные хранятся в виде пар «ключ-значение»;
- хранить можно только строки;
- если необходимо сохранить в эти хранилища массивы и объекты, то перед тем, как это сделать их нужно их сначала преобразовать в строки, например, используя метод JSON.stringify() (для обратного преобразования использовать JSON.parse() ).
Где можно увидеть эти хранилища?
Например, в Google Chrome для этого необходимо открыть «Инструменты разработчика», перейти на вкладку «Application». Здесь они находятся на левой панели в разделе «Storage». При выборе источника вы увидите какие данные содержатся соответственно в sessionStorage и localStorage.
sessionStorage vs localStorage
SessionStorage хранит данные только во время текущей сессии (для вкладки, пока она открыта). Закрытие вкладки или браузера приводит к очищению этих данных. При этом данные сохраняются при обновлении страницы или отображение в этой вкладке другой страницы из этого же источника.
В отличие от sessionStorage , localStorage хранит данные в течение неограниченного количества времени. Они сохраняются при закрытии браузера и выключения компьютера. Но, хоть эти данные могут храниться бесконечно в браузере, обычный пользователь может их удалить, например выполнив очистку истории (при включенной опции «файлы cookie и другие данные сайтов»).
Cookie и localStorage используются для хранения информации в браузере.
Но что лучше использовать в том или ином случае? Чтобы в этом вопросе ориентироваться необходимо знать различия между ними:
Если вы работаете с данными только на клиенте (в браузере), то тогда более предпочтительно использовать localStorage .
Безопасность данных
Хранилище localStorage привязана к источнику (домену, протоколу и порту). Данные, находящиеся в некотором источнике, доступны только на страницах этого же источника. К данным другого источника обратиться нельзя.
SessionStorage ограничена вообще одной вкладкой браузера. Это означает, что с помощью JavaScript нельзя получить доступ к данным другой вкладки даже если она имеет тот же источник.
Работа с localStorage и sessionStorage
Объекты localStorage и sessionStorage являются свойствами глобального объекта window . А это значит к ним можно обращаться соответственно как window.localStorage и window.sessionStorage , или просто localStorage и sessionStorage .Для работы с localStorage и sessionStorage нам доступен одинаковый набор свойств и методов:
- getItem(key) – получает значение по ключу ( key );
- setItem(key, value) – добавляет ключ ( key ) со значением value (если в хранилище уже есть этот ключ, то в этом случае будет просто обновлено его значение);
- removeItem(key) – удаляет ключ ( key );
- clear() – очищает всё хранилище;
- key(index) – получает ключ по индексу (в основном используется в операциях перебора);
- length – количество ключей в хранилище;
Событие storage
Событие storage предназначено для информирования о том, что локальное хранилище обновлено. При этом событие генерируется на всех вкладках, принадлежащих этому источнику, кроме той, которая вызвала эти изменения в localStorage .
Данное событие возникает на объекте window :
Если посмотреть объект event , то среди свойств можно увидеть следующие:
- key – ключ, значение которого изменено (возвращает null при очистке хранилища);
- oldValue – предыдущее значение ( null – если ключ только что был добавлен);
- newValue – новое значение ( null – при удалении ключа);
- storageArea – изменённый объект-хранилище;
- url – url документа, в котором произошло обновление хранилища.
Создадим пример, который будет следить за изменениями в localStorage и обновлять в соответствии с ними данные на страницах.
Для этого создадим две страницы (например, «page-1.html» и «page-2.html») и поместим в них следующий код:
Примеры использования localStorage
1. Добавим ключ в localStorage , после этого получим его значение, а затем удалим:
Кроме указанных методов, можно также использовать квадратные скобки:
2. Удалим все элементы из хранилища localStorage:
3. Переберём все ключи, находящиеся в localStorage :
4. Пример, в котором сохраним объект в localStorage:
В этом коде сохранение объекта выполняется посредством его сериализации в строку JSON посредством JSON.stringify() .
5. Проверим поддерживает ли браузер веб-хранилища?
7. Добавим дату срока действия к элементам, которую затем будем использовать для их очистки (удалять те из них дата срока действия которых превышает текущую):
Задачи
1. Записать момент, на котором пользователь остановился при просмотре видео в localStorage , а затем восстанавливать его при открытии страницы.
2. Сохранить данные формы в хранилище, а затем восстановить их при перезагрузки страницы.
В первые дни Интернета сохранение данных было возможно только на сервере. В настоящее время благодаря использованию LocalStorage мы можем хранить данные на клиентах, таких как браузеры и мобильные приложения, без связи с внутренним приложением.
В этой статье мы обсудим, как разработчики могут хранить данные на клиенте с помощью файлов cookie, и как LocalStorage улучшил этот опыт. Затем мы рассмотрим функции, которые хранят и извлекают данные из LocalStorage. Наконец, мы обсудим, когда целесообразно использовать LocalStorage.
Хранение данных в браузере с помощью файлов cookie
Cookies - это текстовые данные, хранящиеся в клиенте. Они традиционно устанавливаются сервером, однако они также могут быть созданы с помощью кода JavaScript в браузере. Данные в файлах cookie хранятся в виде пар строк ключ / значение.
С помощью файлов cookie вы можете хранить максимум 4 КБ данных на клиенте. Для современных интерфейсных приложений этого может быть недостаточно.
Давайте посмотрим, как LocalStorage позволяет нам создавать и хранить данные на стороне клиента, с гораздо большим объемом памяти, чем предоставляют файлы cookie.
Что такое LocalStorage?
LocalStorage - это хранилище данных ключ / значение, которое доступно в браузере пользователя. Как и файлы cookie, LocalStorage может хранить только строковые данные для своих ключей и значений. Хранилище данных доступно только для JavaScript в этом домене.
Наличие LocalStorage для каждого домена не позволяет вредоносному JavaScript, размещенному на других сайтах, манипулировать или читать данные наших клиентов, которые используются нашим доменом.
Данные в LocalStorage не имеют срока годности. Его можно удалить с помощью JavaScript или очистив кеш браузера.
Теперь, когда мы знаем, что такое LocalStorage, давайте использовать его API для управления данными в браузере.
Как использовать LocalStorage
Мы можем использовать следующие методы для глобального объекта localStorage для управления данными на стороне клиента:
setItem() - Добавить ключ / значение в LocalStorage
getItem() - Получить значение из LocalStorage
removeItem() - Удалить значение по его ключу
clear() - Удалить все элементы из LocalStorage
key() - Получить ключ предмета из LocalStorage
SetItem()
Используйте функцию setItem() для сохранения элемента в LocalStorage. Эта функция принимает ключ в качестве первого аргумента и значение в качестве второго аргумента. Как упоминалось ранее, оба должны быть строками.
В консоли вашего браузера добавим элемент в наш localStorage :
GetItem()
Используйте функцию getItem() для извлечения данных из LocalStorage. Эта функция берет ключ, который использовался при сохранении данных в качестве аргумента.
В вашей консоли давайте восстановим и распечатаем значение, которое было сохранено ранее с помощью setItem() :
Ваша консоль должна печатать «JavaScript».
removeItem()
Используйте функцию removeItem() , чтобы удалить один элемент из LocalStorage. Вам необходимо указать ключ элемента, который вы хотите удалить, в качестве аргумента.
Попробуйте это в вашей консоли, чтобы удалить данные, сохраненные с setItem() :
Чтобы подтвердить, что он был удален, попробуйте получить его еще раз:
Консоль будет выводить «null» при запросе значения с помощью функции getItem() всякий раз, когда не сможет получить элемент.
clear()
Чтобы удалить все данные, хранящиеся в LocalStorage, используйте функцию clear() :
Функция key() позволяет извлечь ключ элемента, сохраненного в LocalStorage по его индексу. Браузер создает целочисленный индекс для каждого элемента, добавленного в LocalStorage.
Поскольку мы не генерируем этот индекс, нам не следует использовать этот индекс для непосредственного получения ключей. Однако мы можем использовать эту функцию, чтобы получить все ключи, хранящиеся в LocalStorage:
Используя свойство LocalStorage.length , мы перебираем каждый созданный индекс для печати всех ключей, которые мы сохранили в LocalStorage. Затем мы можем использовать эти ключи в getItem() для получения всех сохраненных данных.
Теперь, когда мы рассмотрели все функции для управления данными в браузере пользователя, давайте рассмотрим особый случай сохранения сложных объектов вместо строковых данных.
Хранение объектов в LocalStorage
LocalStorage может использовать только строки для своих ключей и значений. Если мы пытаемся сохранить любой другой тип данных, он преобразует его в строку перед сохранением. Это может привести к неожиданному поведению, когда мы хотим сохранить объекты JavaScript.
Давайте создадим объект person в консоли браузера и сохраним его в LocalStorage:
Теперь setItem() преобразовал объект person в строку. Когда мы получаем person как в примере ниже:
Наша консоль браузера покажет это:
Конвертация объекта JavaScript в строку приводит к [object Object] . По общему признанию, возвращение строки, которая только указывает, что объект был сохранен, бесполезно.
Чтобы правильно хранить объекты JavaScript в LocalStorage, нам сначала нужно преобразовать наш объект в JSON строку.
Мы для этого используем встроенную функцию JSON.stringify() . Результирующая строка этой функции будет содержать все свойства нашего объекта JSON. Мы сохраняем вывод этой функции используя setItem() .
Давайте сохраним объект person после его строкового преобразования:
Чтобы извлечь эти данные как объект, нам нужно сделать две вещи. Во-первых, нам нужно использовать 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 и sessionStorage позволяют хранить пары ключ/значение в браузере.
Что в них важно – данные, которые в них записаны, сохраняются после обновления страницы (в случае sessionStorage ) и даже после перезапуска браузера (при использовании localStorage ). Скоро мы это увидим.
Но ведь у нас уже есть куки. Зачем тогда эти объекты?
Объекты хранилища localStorage и sessionStorage предоставляют одинаковые методы и свойства:
- setItem(key, value) – сохранить пару ключ/значение.
- getItem(key) – получить данные по ключу key .
- removeItem(key) – удалить данные с ключом key .
- clear() – удалить всё.
- key(index) – получить ключ на заданной позиции.
- length – количество элементов в хранилище.
Как видим, интерфейс похож на Map ( setItem/getItem/removeItem ), но также запоминается порядок элементов, и можно получить доступ к элементу по индексу – key(index) .
Давайте посмотрим, как это работает.
Демо localStorage
Основные особенности localStorage :
- Этот объект один на все вкладки и окна в рамках источника (один и тот же домен/протокол/порт).
- Данные не имеют срока давности, по которому истекают и удаляются. Сохраняются после перезапуска браузера и даже ОС.
Например, если запустить этот код…
…И закрыть/открыть браузер или открыть ту же страницу в другом окне, то можно получить данные следующим образом:
Нам достаточно находиться на том же источнике (домен/протокол/порт), при этом URL-путь может быть разным.
Объект localStorage доступен всем окнам из одного источника, поэтому, если мы устанавливаем данные в одном окне, изменения становятся видимыми в другом.
Доступ как к обычному объекту
Также можно получать/записывать данные, как в обычный объект:
Это возможно по историческим причинам и, как правило, работает, но обычно не рекомендуется, потому что:
Если ключ генерируется пользователем, то он может быть каким угодно, включая length или toString или другой встроенный метод localStorage . В этом случае getItem/setItem сработают нормально, а вот чтение/запись как свойства объекта не пройдут:
Когда мы модифицируем данные, то срабатывает событие storage . Но это событие не происходит при записи без setItem , как свойства объекта. Мы увидим это позже в этой главе.
Перебор ключей
Методы, которые мы видим, позволяют читать/писать/удалять данные. А как получить все значения или ключи?
К сожалению, объекты веб-хранилища нельзя перебрать в цикле, они не итерируемы.
Но можно пройти по ним, как по обычным массивам:
Другой способ – использовать цикл, как по обычному объекту for key in localStorage .
Здесь перебираются ключи, но вместе с этим выводятся несколько встроенных полей, которые нам не нужны:
…Поэтому нам нужно либо отфильтровать поля из прототипа проверкой hasOwnProperty :
…Либо просто получить «собственные» ключи с помощью Object.keys, а затем при необходимости вывести их при помощи цикла:
Последнее работает, потому что Object.keys возвращает только ключи, принадлежащие объекту, игнорируя прототип.
Только строки
Обратите внимание, что ключ и значение должны быть строками.
Если мы используем любой другой тип, например число или объект, то он автоматически преобразуется в строку:
Мы можем использовать JSON для хранения объектов:
Также возможно привести к строке весь объект хранилища, например для отладки:
sessionStorage
Объект sessionStorage используется гораздо реже, чем localStorage .
Свойства и методы такие же, но есть существенные ограничения:
- sessionStorage существует только в рамках текущей вкладки браузера.
- Другая вкладка с той же страницей будет иметь другое хранилище.
- Но оно разделяется между ифреймами на той же вкладке (при условии, что они из одного и того же источника).
Давайте посмотрим на это в действии.
Запустите этот код…
…И обновите страницу. Вы всё ещё можете получить данные:
…Но если вы откроете ту же страницу в другой вкладке и попробуете получить данные снова, то код выше вернёт null , что значит «ничего не найдено».
Так получилось, потому что sessionStorage привязан не только к источнику, но и к вкладке браузера. Поэтому sessionStorage используется нечасто.
Событие storage
Когда обновляются данные в localStorage или sessionStorage , генерируется событие storage со следующими свойствами:
- key – ключ, который обновился ( null , если вызван .clear() ).
- oldValue – старое значение ( null , если ключ добавлен впервые).
- newValue – новое значение ( null , если ключ был удалён).
- url – url документа, где произошло обновление.
- storageArea – объект localStorage или sessionStorage , где произошло обновление.
Важно: событие срабатывает на всех остальных объектах window , где доступно хранилище, кроме того окна, которое его вызвало.
Представьте, что у вас есть два окна с одним и тем же сайтом. Хранилище localStorage разделяется между ними.
Вы можете открыть эту страницу в двух окнах браузера, чтобы проверить приведённый ниже код.
Теперь, если оба окна слушают window.onstorage , то каждое из них будет реагировать на обновления, произошедшие в другом окне.
Обратите внимание, что событие также содержит: event.url – url-адрес документа, в котором данные обновились.
Также event.storageArea содержит объект хранилища – событие одно и то же для sessionStorage и localStorage , поэтому event.storageArea ссылается на то хранилище, которое было изменено. Мы можем захотеть что-то записать в ответ на изменения.
Современные браузеры также поддерживают Broadcast channel API специальный API для связи между окнами одного источника, он более полнофункциональный, но менее поддерживаемый. Существуют библиотеки (полифилы), которые эмулируют это API на основе localStorage и делают его доступным везде.
Итого
Объекты веб-хранилища localStorage и sessionStorage позволяют хранить пары ключ/значение в браузере.
- key и value должны быть строками.
- Лимит 2 Мб+, зависит от браузера.
- Данные не имеют «времени истечения».
- Данные привязаны к источнику (домен/протокол/порт).
- setItem(key, value) – сохранить пару ключ/значение.
- getItem(key) – получить данные по ключу key .
- removeItem(key) – удалить значение по ключу key .
- clear() – удалить всё.
- key(index) – получить ключ на заданной позиции.
- length – количество элементов в хранилище.
- Используйте Object.keys для получения всех ключей.
- Можно обращаться к ключам как к обычным свойствам объекта, в этом случае событие storage не срабатывает.
- Срабатывает при вызове setItem , removeItem , clear .
- Содержит все данные об произошедшем обновлении ( key/oldValue/newValue ), url документа и объект хранилища storageArea .
- Срабатывает на всех объектах window , которые имеют доступ к хранилищу, кроме того, где оно было сгенерировано (внутри вкладки для sessionStorage , глобально для localStorage ).
Задачи
Автосохранение поля формы
Создайте поле textarea , значение которого будет автоматически сохраняться при каждом его изменении.
Когда пользователь закроет страницу и потом откроет её заново он должен увидеть последнее введённое значение.
Читайте также: