localStorage и sessionStorage

API веб-хранилища предоставляет два клиентских хранилища пар «ключ — значение»: localStorage (сохраняется между сеансами) и sessionStorage (очищается при закрытии вкладки). Оба хранилища содержат строковые значения и синхронно доступны через JavaScript в пределах одного источника.

Данные в localStorage сохраняются, пока явно не будут удалены кодом, пользователем или в результате удаления данных браузера. Они переживают перезапуск браузера, обновление страницы и закрытие вкладки. Обычно для каждого источника доступно от 5 до 10 MB в зависимости от браузера.

sessionStorage относится к текущей вкладке браузера и текущему сеансу. Данные сохраняются при обновлении страниц в той же вкладке, но удаляются при её закрытии. Две вкладки одного сайта имеют отдельные изолированные хранилища sessionStorage — они не обмениваются данными.

Оба хранилища используют один и тот же API: setItem(key, value), getItem(key), removeItem(key), clear() и свойство length. Один и тот же код работает с обоими хранилищами — достаточно заменить localStorage на sessionStorage или наоборот.

Используйте localStorage для пользовательских настроек (темы, языка), кэшированных ответов API и функции запоминания пользователя. Используйте sessionStorage для состояния шагов мастера или формы, временной корзины покупок до оформления заказа и данных, которые не должны сохраняться между посещениями по соображениям конфиденциальности.

Оба хранилища строго привязаны к источнику (протоколу, хосту и порту). https://example.com не может прочитать данные localStorage, сохранённые сайтом http://example.com. Это граница безопасности — поддомены также являются отдельными источниками, если не изменить document.domain (что устарело).

В большинстве браузеров для каждого источника доступно около 5 MB. Превышение лимита вызывает ошибку QuotaExceededError. Для хранения больших объёмов данных требуется IndexedDB, поддерживающий гигабайты структурированных данных. Веб-хранилище предназначено для небольших пар «ключ — значение», а не для двоичных объектов или больших наборов данных.

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

Веб-хранилище сохраняет только строки. Сериализуйте объекты с помощью JSON.stringify(); десериализуйте их с помощью JSON.parse(). Обрабатывайте ошибки разбора: try { return JSON.parse(stored) } catch { return defaultValue }. Повреждённые значения или значения не в формате JSON в хранилище вызывают ошибки разбора.

localStorage в приватном режиме или режиме инкогнито очищается после закрытия всех приватных окон — фактически ведёт себя как sessionStorage. Код, использующий localStorage для состояния аутентификации, должен обрабатывать ситуацию, когда localStorage неожиданно удаляется.

Браузеры всё чаще ограничивают доступ сторонних сайтов к хранилищу. Встроенный фрейм со стороннего сайта third-party.com на основном сайте first-party.com не может получить доступ к localStorage сайта third-party.com. ITP в Safari и усиленная защита от отслеживания в Firefox разделяют хранилище на изолированные области — использование хранилища основным сайтом это не затрагивает.

Когда очищается sessionStorage?

localStorage сохраняется неограниченно долго, пока его программно или вручную не очистит пользователь; sessionStorage очищается при закрытии вкладки. Оба хранилища привязаны к источнику, работают синхронно, содержат строковые пары «ключ — значение» и имеют ёмкость около 5 MB. Используйте localStorage для настроек и постоянного состояния, а sessionStorage — для временного состояния, ограниченного сеансом и не сохраняющегося после закрытия вкладки.