Что такое localStorage и как им пользоваться

localStorage – это технология хранения информации на стороне клиента. localStorage постепенно вытесняет другую технологию хранения данных – cookies, с которыми не очень удобно работать. По формату localStorage – практически хэш-таблица (таблица с парами «ключ:значение»), только со своими методами. Ниже – о том, зачем и как им пользоваться.

Способы хранения данных на стороне клиента

Для начала – вкратце расскажем, почему localStorage вообще появился и почему вам следует им пользоваться. Иногда нам нужно хранить какую-то информацию на стороне клиента – выбранные им язык и тема оформления, настройки личного кабинета и так далее. Сейчас для этого используются 3 основные технологии: cookies (самая первая из появившихся), localStorage и Indexed DB. Indexed DB – самая продвинутая и сложная, она позволяет хранить все данные в специальной базе данных, и для многих проектов такая технология избыточна – остаются cookies и localStorage.

Cookies – это специальная строка в заголовке HTTP-запроса, в DOM-модели она хранится в «document.cookie». Из плюсов куки – они есть везде, где есть передача данных по HTTP, то есть вам вообще не нужно задаваться вопросами совместимости: куки как технология будут поддерживаться, какой бы проект вы не разрабатывали. Но, как и у любой первой в области технологии, у cookies со временем обнаружился ряд проблем:

• Очень маленький размер. Поскольку куки передаются от клиента к серверу и обратно с каждым запросом (так как находятся в заголовке), размер куки жестко ограничен из соображений быстродействия – куки могут хранить до 4 Кб информации.
• Нет уверенности в целостности данных. Сервер может на своей стороне менять содержимое cookies – то есть если вы строите логику приложения на данных в cookies, то при получении каждого нового ответа от сервера вам нужно валидировать куки и что-то делать с теми случаями, когда куки были без вашего ведома изменены.
• Сложно обеспечить сохранность данных. У cookies – сложный механизм настройки валидных адресов, при этом сама технология практически не предоставляет защиты от межсайтовых уязвимостей.

Кроме того, есть и вполне практичная проблема: с cookies банально неудобно работать. Куки представляют собой сплошную строку, для которой нужен специальный парсер – нужно либо подключать готовый, либо писать свой. И если будете писать свой – ни в коем случае не допускайте ошибки, cookies очень легко случайно перезаписать, удалив все данные.

В целом все эти минусы cookies легко объяснить: изначально технология не была предназначена для хранения данных на стороне пользователя, просто у разработчиков не было вообще никакого адекватного инструмента для этой задачи, и cookies оказались достаточно подходящими. Но – эти времена в прошлом, потому что сейчас браузеры предоставляют localStorage – объект браузера (window), который позволяет хранить на клиентской стороне до 5 Мб (иногда – больше) данных, полностью контролируется на стороне клиента и никуда не передается без вашего ведома.

localStorage – как пользоваться и какие особенности

localStorage – объект браузера. Для объектов хранилища в любом браузере прописан шорткат: вам не нужно писать «window.localStorage.getItem()», можете сразу обращаться по пути «localStorage.getItem()». С объектом хранилища можно работать как через встроенные методы, так и напрямую через свойства объекта; второй вариант существует только для обратной совместимости, работать с localStorage через свойства объекта крайне не рекомендуется – пользуйтесь встроенными методами.

По структуре локальное хранилище представляет собой массив, мимикрирующий под хэш-таблицу (словарь/карту), то есть все данные хранятся в парах «ключ:значение». Технология предоставляет ряд методов, с помощью которых этими данными можно манипулировать:

• .setItem(ключ, значение). Создать ключ, сохранить связанное с ним значение.
• .getItem(ключ). Получить значение по ключу.
• .removeItem(ключ). Удалить ключ и данные, с ним ассоциированные.
• .key(индекс). Получить ключ по индексу нижележащего массива.

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

let keys = Object.keys(localStorage);
for(let key of keys) {
alert(`${key}: ${localStorage.getItem(key)}`);
}

Особенности localStorage

• И ключи, и значения в localStorage хранятся только в виде строк – если вам нужно сохранить объект, используйте JSON (.stringify для упаковки и .parse для распаковки).
• Данные хранятся даже после перезапуска браузера.
• Источник определяется по домену, протоколу и порту – для адресов с разными портами и протоколами (даже http и https) будут созданы отдельных хранилища, для разных поддоменов одного домена тоже будут созданы отдельные хранилища.
• Все localStorage привязаны к своему источнику и изолированы друг от друга.
• При каждом изменении localStorage генерируется событие storageEvent, которое срабатывает сразу на всех вкладках, на которых может. То есть если у пользователя открыты 2 вкладки с одной и той же страницей, мы на одной странице меняем через localStorage тему со светлой на темную – она поменяется и на второй странице (возможно, ее нужно будет обновить).

Кратко о sessionStorage

У localStorage есть альтернатива в виде sessionStorage. Методы работы у объекта – те же, что и у локального хранилища. Из отличий:

• Данные сохраняются, пока вкладка открыта (обновление страницы не удаляет данные).
• Данные «расшариваются» в рамках вкладки и среди iFrames одного источника.

Идея была хорошей – хранить информацию о текущей сессии. Увы, что-то пошло не так: sessionStorage так и не стал популярным инструментом, потому что его ограничения сильно сужают область применения.

Вывод

Тезисно:

• localStorage – хранилище для данных на стороне клиента.
• Локальное хранилище пришло на смену cookies – его использование предпочтительно, если вам нужно сохранить какие-либо данные на стороне клиента.
• Работа с localStorage очень похожа на работу с хэш-таблицей – только помните, что все ключи и значения должны быть в строках (используйте JSON при необходимости).