Что такое localStorage
localStorage — это API браузера, благодаря которому сайты могут сохранять небольшие объемы информации на устройстве пользователя. Они сохраняются в том числе после завершения работы: при следующем посещении сайта они остаются доступными. Эта опция удобна для хранения настроек пользователя: например, для настроек языка, темы оформления, товаров в корзине покупок.
localStorage, как и sessionStorage — это API веб-хранилища. Но между ними существует разница. Хранилище sessionStorage доступно во время текущей сессии, а также при перезагрузке, но как только браузер закрывается, данные из него удаляются без возможности восстановления. В localStorage они сохраняются в том числе после закрытия программы, поэтому их можно использовать повторно: например, в играх, интернет-магазинах, сайтах с личным кабинетом.
Расскажем подробнее о механизмах хранения данных, применении хранилища, основных используемых в нем методах, ограничениях, совместимости с разными видами браузеров.
Как хранятся данные в localStorage
Все данные localStorage остаются доступными, пока их не удалят вручную или с помощью специального кода. Они хранятся в виде пар «ключ-значение», где оба элемента — это строковые данные.
Применение localStorage
Теперь расскажем, для чего и как применяется локальное хранилище.
Сохранение настроек пользователя
Так как localStorage хранит исключительно текстовую информацию, для хранения объектов, массивов, других сложных типов данных, их нужно преобразовывать в строки с помощью JSON.stringify() перед записью, а также из строк в изначальный формат с помощью JSON.parse() при чтении.
Сокращение запросов к серверу
При использовании localStorage можно сократить число запросов к серверу: часто используемые данные хранятся локально, а обновляются только при необходимости вместо того, чтобы каждый раз запрашивать список у сервера. Это значительно ускоряет работу приложения, уменьшает нагрузку на сервер и экономит трафик.
Работа приложений без подключения к интернету
localStorage позволяет веб-приложениям работать автономно. В результате можно загрузить нужные данные, когда подключение работает, а затем использовать их в офлайн-режиме, когда доступа к интернету нет. Так пользователям будут доступны базовые функции: например, доступ к сохраненным данным, просмотр офлайн-контента или использование некоторых инструментов. Это делает приложения более доступными, в том числе вдалеке от интернета — например, в дороге или в условиях перебоев с подключением.
Методы работы с localStorage
Теперь опишем основные методы работы с хранилищем.
Сохранение данных — setItem()
Это инструмент, помогающий сохранять данные в localStorage. Он состоит из пары ключ — значение, где оба элемента представляют собой строковые данные.
Приведем пример с сохранением в localStorage имени пользователя. Код на JavaScript для этой опции будет выглядеть так:
localStorage.setItem('userName', 'Василий Иванов);
В этом примере userName — ключ, «Василий Иванов» — значение. При следующем запуске приложения это значение можно извлекать из localStorage много раз с помощью метода getItem() до того момента, когда пользователь очистит данные.
Получение данных — getItem()
Метод getItem() нужен для извлечения данных, сохраненных в localStorage браузера. Аргументом для него является ключ (строка), которая используется для идентификации сохраненных данных. Если ключ находится, метод getItem() возвращает его значение в виде строки, если он отсутствует — null.
Для получения данных вызывается метод getItem(), а ему передается ключ. Приведем пример с именем пользователя, сохраненным в localStorage под ключом userName. Для его вызова можно использовать следующий код на JavaScript:
let userName = localStorage.getItem('userName');
Переменная userName будет содержать имя пользователя, если ключ userName найден: например, «Василий Иванов». Метод getItem() восстанавливает данные, сохраненные в localStorage, чтобы потом использовать их в работе приложения даже при отсутствии интернет-подключения.
Удаление данных — removeItem()
Метод removeItem() нужен для удаления данных. Его ключ также является строкой: он используется для идентификации данных, которые нужно удалить.
Для удаления данных нужно вызвать метод removeItem(), передав ему ключ. Вернемся к нашему примеру с именем пользователя — код будет выглядеть так:
localStorage.removeItem('userName');
После вызова метода данные, связанные с ключом userName, будут удалены из localStorage. Так можно очистить ненужные данные, управляя их содержанием.
Очистка localStorage — clear()
Можно очистить данные полностью, используя метод clear (). Он не принимает никаких аргументов, а просто очищает localStorage.
Код вызова метода выглядит так:
localStorage.clear();
После вызова абсолютно все данные удаляются. Метод clear() полезен, когда нужно полностью очистить хранилище, например, при выходе из системы или при отладке приложения.
Для проверки заполненности хранилища используется также свойство length. Оно показывает число пар (элементов), содержащихся в хранилище, доступное только через интерфейс localStorage, только для чтения. В коде оно выглядит так:
window.localStorage.length
Если свойство length возвращает значение 0, это значит, что хранилище пустое.
Получение ключа элемента — key()
Этот метод нужен для получения ключа элемента по его индексу. Аргументом является индекс (целое число). Он указывается с нуля. В итоге возвращается значение ключа в виде строки, если индекс действителен, и null — если действителен.
Приведем пример кода для получения ключа первого элемента в localStorage:
let firstKey = localStorage.key(0);
Переменная firstKey будет содержать ключ первого элемента в localStorage, если в нем хранится хотя бы один элемент. Если элементов нет, firstKey будет равен null. Эта опция полезна в тех случаях, когда надо получить список ключей в localStorage, чтобы затем перебрать их.
Свойства localStorage
Перечислим основные свойства localStorage.
- Как уже говорилось, оно всегда хранится в формате строки UTF-16. Целочисленные ключи преобразуются в строки, а потом сохраняются в таком виде.
- Данные в хранилище localStorage определяются протоколами сайта и браузера. Для протоколов HTTP и HTTPS они уже будут разными.
- Для документов, загруженных из файла, требования не определяются четко: они будут разными для разных браузеров.
- Данные localStorage для инкогнито-режима или приватных браузеров удаляются по окончании сессии.
События
При изменениях в объектах срабатывает так называемое событие хранилища. Оно отправляется в окно, когда область хранения, доступная из этого окна, как-либо меняется в контексте работы с другим документом.
Запуск события хранилища происходит с каждым изменением. Пользователь может прослушивать их и на основе этого принимать решения в приложении или на сайте.
Конструктор
Конструктор событий StorageEvent() возвращает при вызове новый объект StorageEvent.
Приведем пример использования консоли для создания нового экземпляра события хранилища. Код для этого выглядит так:
:new window.StorageEvent(keys)
Результатом становится объект StorageEvent с набором элементов.
Свойства элементов
Разберем свойства элементов StorageEvent подробнее.
Keys
Этот элемент возвращает строку, аналогичную измененному ключу. При использовании метода clear() атрибут ключа равен null.
newValue
Возвращает измененное значение ключа в строковом формате. При использовании метода clear() или удалении атрибут ключа равен null.
oldValue
Возвращает исходное значение ключа в строковом формате. При добавлении нового ключа равен null.
storageArea
Возвращает затронутую область хранилища.
url
Возвращает в строковом формате URL-адрес документа, ключ которого менялся.
Ограничения localStorage
Хранилище localStorage — простой удобный способ сохранения пользовательских данных в веб-приложении. Но в нем есть свои ограничения, о которых важно помнить.
Локальное хранилище не предназначено для хранения конфиденциальной информации. Все сохраненные в нем данные доступны веб-приложению, а оно имеет доступ к сайту, на котором они были сохранены. Этим могут воспользоваться злоумышленники, поэтому не стоит хранить таким образом любые чувствительные данные: пароли, платежные реквизиты, приватную информацию. В противном случае их можно легко перехватить, используя межсайтовый сценарий (cross site scripting).
Еще одно ограничение хранилища — его объем до 5 МБ данных. Кроме того, оно работает синхронно, и поэтому обращаются к нему последовательно.
Совместимость
Вопрос совместимости localStorage с браузерами в последних версиях решен, однако в очень старых браузерах возможны проблемы.
В приватном окне любого браузера или в режиме инкогнито вся информация немедленно удаляется из хранилища при закрытии окна.
Также любой пользователь имеет право отключить хранилище вручную.
В целом localStorage в языке JavaScript — это гибкий, удобный способ сохранения информации о пользователях, состоянии приложений. Используя хранилища, программисты могут создавать более персонализированные, интерактивные, отзывчивые веб-приложения, способные сохранять важную информацию даже при автономной работе. Если помнить об ограничениях этого инструмента, то с его помощью легко обеспечить корректную работу приложения в разных условиях.
Людям, знакомым с JavaScript достаточно глубоко, стоит помнить, что localStorage — это не единственный способ хранения данных в браузере. Для более сложных задач или для хранения больших объемов данных можно использовать IndexedDB, который предоставляет больше возможностей, но требует более сложного взаимодействия. Выбор оптимального решения зависит от конкретных требований, особенностей проекта, а также от квалификации команды разработчиков.