LocalStorage или sessionStorage: что выбрать для настроек интерфейса

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

Что сравниваем

Допустим, посетитель выбрал компактный вид карточек. Нужно решить, запомнить ли выбор при следующем посещении или оставить его только в текущей вкладке. Это задача браузерного хранения небольшого состояния интерфейса. Она не требует сохранять в браузере весь каталог или заменять серверную базу данных.

Источник определяется схемой, хостом и портом. Поэтому переход с HTTP на HTTPS или на другой поддомен меняет область хранения. Совпадение названия сайта в шапке не означает, что две страницы увидят одну запись.

Под «сеансом вкладки» здесь понимается жизнь конкретной области sessionStorage. Перезагрузка страницы его не завершает. Браузер может сохранять состояние при восстановлении вкладки; не используйте закрытие окна как подтверждённое уничтожение чувствительных сведений.

Плюсы и минусы

Когда удобен localStorage

Он подходит для небольшого предпочтения, которое хочется применить позже: плотность карточек, выбранный способ показа или отключённая необязательная подсказка. У записи нет встроенного срока истечения. Вы сами определяете, когда значение следует обновить или удалить.

Когда удобен sessionStorage

Он полезен для отдельного временного сценария вкладки: например, запомнить раскрытый раздел учебной инструкции после перезагрузки. Параллельно открытая страница может иметь своё состояние, не перезаписывая первую. Это удобно, когда посетитель сравнивает несколько независимых вариантов.

Но sessionStorage не является автоматически защищённым хранилищем. Оно доступно выполняющимся в соответствующем контексте скриптам. Само слово session не создаёт ни авторизацию, ни связь с серверным сеансом пользователя.

Есть важная тонкость новой вкладки: если у неё есть opener, начальное содержимое sessionStorage может быть скопировано из открывшей её страницы. После этого области независимы, изменения не синхронизируются. Проверяйте именно способ открытия, используемый на вашем сайте.

Что подойдёт под задачу

Запомнить вид списка между посещениями. Обычно подходит localStorage. Сначала проверьте сохранённое значение по разрешённому набору, затем примените его. Если значение неизвестно, используйте обычный вид. Выбор на одном устройстве не станет автоматически выбором на другом.

Оставить состояние только для текущей работы. Можно использовать sessionStorage. Сформулируйте, что должно пережить перезагрузку и что допустимо потерять. Если потеря повредит работе, нужна другая схема сохранения, а не надежда на поведение вкладки.

Перенести настройку между устройствами. Нужен серверный механизм, связанный с учётной записью, если такая возможность предусмотрена продуктом. Ни одно из двух хранилищ само по себе не синхронизирует данные между разными браузерами и устройствами.

Сохранить подтверждённую оплату или права доступа. Это не задача клиентской записи. Посетитель может изменить её в своём браузере. Сервер должен сам проверять значимые условия. Значение вида «доступ разрешён» в localStorage не может служить доказательством полномочий.

Работать с большим набором объектов. Оцените другой механизм, например IndexedDB, и продумайте обновление данных. Web Storage выполняет операции синхронно. Частое чтение и запись больших строк может мешать работе страницы.

Как это сделать по шагам

1. Опишите нужную длительность. Решите, должно ли значение остаться после перезагрузки, после отдельного посещения и в другой вкладке. Зафиксируйте ожидаемое поведение, прежде чем выбирать API.
2. Выберите только нужные данные. Для учебного примера возьмите безопасную настройку вида списка. Не добавляйте пароли, платёжные сведения и закрытые документы.
3. Задайте имя записи и разрешённые значения. Используйте понятный префикс проекта, чтобы случайно не столкнуться с другой функцией сайта. Продумайте обычное значение при отсутствии записи.
4. Обработайте чтение и запись. Доступ к хранилищу может завершиться ошибкой. Предусмотрите работу страницы без сохранения. Если храните JSON, отдельно обработайте повреждённый или устаревший формат.
5. Применяйте прочитанное после проверки. Принимайте только значения, которые поддерживает текущий код. Сохранённая строка не является доверенной командой или готовой HTML-разметкой.
6. Проверьте жизненный цикл. Перезагрузите страницу, откройте вторую вкладку, закройте и восстановите её привычным способом. Сопоставьте наблюдения со своей задачей.
7. Проверьте отсутствие и отказ хранения. Удалите только учебную запись и убедитесь, что интерфейс работает с обычными настройками. Проверьте ограниченный режим браузера, доступный вашей тестовой среде.
8. Опишите очистку и обновление. Решите, когда запись больше не нужна и как код поступит с её старой версией. Повторите проверку после выпуска новой функции.

Минимальный пример настройки

Пример ниже показывает только запись и чтение. Имя site:layout условное, значение compact означает компактный вид. Эти строки выполняют в коде своей тестовой страницы, а не вставляют в поле с пользовательским текстом.

localStorage.setItem('site:layout', 'compact');

const layout = localStorage.getItem('site:layout');

Если такого имени нет, getItem вернёт null. Если запись существует, вернётся строка. Перед применением проверьте, что она равна одному из разрешённых вариантов, например compact или regular. Любое другое содержимое должно вести к обычному безопасному состоянию интерфейса.

Для варианта на время вкладки используют те же методы у sessionStorage. Простая замена объекта меняет длительность и область, но не решает обработку ошибок, проверку содержимого и связь с интерфейсом. Эти части всё равно нужно реализовать.

В рабочем коде чтение и запись окружают обработкой исключений. Если сохранение недоступно, текущий выбор можно оставить в памяти страницы, чтобы посетитель продолжил работу. После перезагрузки настройка в таком случае пропадёт — это нужно считать допустимым ограничением, а не успешно выполненным сохранением.

Строки, JSON и устаревшие записи

Оба хранилища работают со строками. При попытке положить объект без преобразования вы не получите удобное сохранение его структуры. Для простых объектов используют JSON.stringify при записи и JSON.parse при чтении, но разбор строки может завершиться ошибкой.

Даже корректный JSON ещё не гарантирует нужную структуру. Проверьте имена полей, типы и допустимые значения. Например, новый интерфейс поддерживает два вида списка, а в записи осталось значение от старой экспериментальной сетки. Применять его без проверки не стоит.

Не используйте clear() как универсальный способ исправить одну настройку. Он очищает всю соответствующую область хранения, а там могут быть записи других функций того же источника. Для своего значения используйте removeItem с его фактическим именем.

Как ведут себя несколько вкладок

При localStorage страницы одного источника могут читать общую область. Но уже нарисованный интерфейс не обязан сам перерисоваться после изменения в соседней вкладке. Для реакции используют событие storage и обновляют подходящие элементы.

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

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

Ошибки выбора

• Считать localStorage вечным. У него нет собственного таймера истечения, но запись может исчезнуть из-за очистки и политики браузера. Приложение должно переживать отсутствие данных.
• Приравнять sessionStorage к серверной сессии. Это клиентская область вкладки. Она не подтверждает вход пользователя и его права.
• Хранить секреты ради удобства. Выполняющийся на странице скрипт может иметь доступ к данным. Способ хранения не исправляет уязвимости в коде страницы.
• Не различать источники. Другой протокол, хост или порт меняет область. Проверяйте фактический адрес тестового сайта.
• Записывать большой объект при каждом движении мыши. Синхронные операции и преобразования строк создают лишнюю работу. Храните небольшой нужный результат в подходящий момент.
• Обещать сохранение без проверки результата. Ошибка доступа или переполнение требуют отдельного поведения интерфейса.

Как проверить выбор

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

Проверяйте сайт через веб-адрес. Поведение localStorage у документов, открытых с диска через file:, не стоит считать надёжной моделью опубликованного приложения. В приватном режиме и при ограничении хранения условия тоже могут отличаться.

Чтобы найти ошибку кода, используйте разбор консоли JavaScript. После изменения поведения проверьте состояния без данных и при сбое и внесите результат в журнал изменений. Помощь с реализацией можно найти в разделе Разработка.

Вопросы и ответы

Что выбрать для настройки между посещениями?

Для небольшой локальной настройки обычно подходит localStorage. Предусмотрите обычное значение на случай отсутствия записи. Если настройка должна следовать за аккаунтом на другом устройстве, нужен отдельный серверный механизм.

Исчезнет ли sessionStorage после перезагрузки?

Обычная перезагрузка сохраняет состояние сеанса вкладки. Проверьте также восстановление вкладки в своём браузере. Не используйте эти особенности как обещание надёжного хранения или гарантированного удаления чувствительных данных.

Почему две вкладки начинают с одинакового sessionStorage?

При наличии opener новая вкладка может получить начальную копию области открывшей её страницы. Затем записи существуют отдельно. Проверьте способ открытия и не делайте вывод об общей синхронизации по одному совпадающему значению.

Можно ли положить объект без JSON.stringify?

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

Почему настройка пропала после перехода на HTTPS?

Протокол входит в источник, по которому разделено хранилище. У HTTP и HTTPS разные области. Продумайте поведение после такого перехода и не рассчитывайте, что браузер автоматически перенесёт вашу настройку.

Запись автоматически отправляется на сервер?

Сами localStorage и sessionStorage не пересылают содержимое серверу как часть своей работы. Передачу должен выполнить код приложения. Это не делает данные секретными: их доступность выполняющимся скриптам нужно учитывать отдельно.

Что делать, если сохранение запрещено браузером?

Обработайте ошибку и оставьте страницу пригодной для работы. Для необязательной настройки можно использовать временное состояние в памяти. Если сохранение критично, объясните ограничение и предусмотрите другой подтверждённый путь.