Чтение и запись в localStorage в React

localStorage — это встроенное хранилище браузера с четырьмя основными методами: setItem(key, value), getItem(key), removeItem(key) и clear(). Данные сохраняются после перезагрузки страницы и перезапуска браузера.

Хранилище находится в объекте window и ограничено источником: у каждого домена есть собственное изолированное хранилище.

Каждый вызов localStorage синхронно выполняется в основном потоке. Чтение или запись больших объёмов данных может блокировать отрисовку и заставлять интерфейс работать рывками.

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

localStorage может хранить только строки. Чтобы сохранить объект или массив, сначала сериализуйте его с помощью JSON.stringify(value), а затем вызовите setItem.

Если напрямую сохранить значение не строкового типа, оно будет приведено к строке, и объект превратится в бесполезную строку [object Object].

При чтении вызовите JSON.parse(localStorage.getItem(key)), однако разбор может завершиться ошибкой, если сохранённая строка повреждена или была записана другим источником.

Оберните разбор в try/catch и используйте значение по умолчанию, чтобы некорректная запись не привела к сбою компонента.

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

Надёжная проверка — это try/catch, который записывает и удаляет временный ключ и возвращает ложный результат, если возникает ошибка.

Большинство браузеров ограничивают объём localStorage примерно пятью мегабайтами для одного источника. При превышении этого объёма запись вызывает ошибку QuotaExceededError.

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

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

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

Не храните секреты, такие как токены или пароли: любой скрипт на странице может прочитать localStorage, что делает его уязвимым для XSS. Также не храните большие объекты и достоверное состояние сервера.

Конфиденциальные данные аутентификации следует хранить в файлах cookie с атрибутом httpOnly, а основные данные — на сервере.

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

Выбирайте sessionStorage для краткосрочных данных, относящихся к одной вкладке, а localStorage — для постоянных предпочтений.

Файлы cookie имеют небольшой объём и отправляются с каждым HTTP-запросом, поэтому подходят для аутентификации, но расходуют пропускную способность при хранении обычных данных. IndexedDB — это асинхронная база данных для больших структурированных данных, значительно превышающих лимит в 5 МБ.

Выбирайте файлы cookie для аутентификации, которую должен читать сервер, localStorage — для небольших настроек клиента, а IndexedDB — для больших или сложных данных.

Минимальный вспомогательный код записывает данные с помощью localStorage.setItem(key, JSON.stringify(value)), а считывает их с помощью защищённого от ошибок блока try/catch вокруг JSON.parse(localStorage.getItem(key)), возвращая значение по умолчанию при сбое.

Эта небольшая обёртка объединяет сериализацию и обработку ошибок в одном месте.

Проверьте, насколько хорошо Вы понимаете типы данных localStorage.

Вы изучили программный интерфейс localStorage, узнали, что он синхронный, работает только со строками и ограничен объёмом около 5 МБ, а также научились безопасно разбирать данные и проверять доступность хранилища в SSR и приватном режиме.

Кроме того, Вы сравнили его с sessionStorage, файлами cookie и IndexedDB, чтобы выбирать подходящее хранилище.