React Frontend Developer

Question 1

Как защитить данные в LocalStorage от стороннего JS?

Accepted Answer

Полностью защитить LocalStorage от чтения/изменения сторонним JS нельзя, так как он доступен в том же контексте. Можно уменьшить риски: хранить только нечувствительные данные, использовать шифрование или HttpOnly-куки для критичной информации.

Question 2

Какие хранилища подходят для больших данных (LocalStorage, IndexedDB)?

Accepted Answer

Для больших объемов данных лучше использовать IndexedDB, так как оно поддерживает асинхронную работу и хранение структурированных объектов. LocalStorage подходит для небольших объемов (до ~5 МБ) и синхронных операций.

Question 3

Как на фронтенде реализуется авторизация? (Хранение access/refresh токенов в Cookies / LocalStorage, отправка токена в запросах, обновление токена)

Accepted Answer

Access token хранится в памяти или LocalStorage для доступа к API. Refresh token хранится в HttpOnly cookie для безопасного обновления. Токен автоматически добавляется в заголовки запросов и обновляется при истечении.

Question 4

Где хранить кэшированные данные? (LocalStorage, IndexedDB). Что делать, если IndexedDB не поддерживается?

Accepted Answer

Для кэширования данных используйте LocalStorage для небольших текстовых данных (до 5MB), IndexedDB для больших объемов и сложных структур. Если IndexedDB не поддерживается, можно использовать LocalStorage как fallback, либо реализовать полифилл для IndexedDB. Для совсем старых браузеров можно использовать cookies или серверное хранение.

Question 5

Чем localStorage отличается от sessionStorage?

Accepted Answer

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

Question 6

Чем отличаются LocalStorage, IndexedDB, cookies и sessionStorage?

Accepted Answer

LocalStorage хранит данные бессрочно, sessionStorage — до закрытия вкладки. Cookies автоматически отправляются на сервер и используются для авторизации. IndexedDB — это база данных в браузере для хранения больших объемов данных и сложных структур.

Question 7

Что такое LocalStorage?

Accepted Answer

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

Question 8

Как решать проблемы изменения структуры данных в localStorage между версиями приложения?

Accepted Answer

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

Question 9

Почему важно учитывать null при получении данных из localStorage?

Accepted Answer

Метод getItem возвращает null, если ключ не существует в localStorage. Если не проверять это значение, код может упасть с ошибкой при попытке вызвать методы на null, например JSON.parse(null). Всегда проверяйте результат getItem на null перед использованием.

Question 10

Какие методы есть у localStorage?

Accepted Answer

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

Вопросы React Frontend Developer