Какие знаешь хранилища в браузере

Вопрос

Какие знаешь хранилища в браузере

Профессия

Frontend Developer

Что хочет услышать интервьюер

Интервьюер хочет убедиться, что кандидат понимает различные механизмы хранения данных в браузере, их особенности, ограничения и практическое применение. Важно показать знание современных технологий (например, IndexedDB и Cache API) и понимание их использования в реальных проектах.

Ключевые тезисы

• LocalStorage: простое хранилище для данных в формате ключ-значение, сохраняется даже после закрытия браузера.
• SessionStorage: аналогично LocalStorage, но данные сохраняются только на время сессии (до закрытия вкладки).
• Cookies: небольшие фрагменты данных, которые могут быть отправлены на сервер с каждым запросом. Используются для аутентификации, отслеживания и т.д.
• IndexedDB: мощная NoSQL база данных для хранения больших объемов структурированных данных.
• Cache API: используется для хранения ресурсов (например, файлов) в рамках Service Workers для оффлайн-работы приложений.
• WebSQL (устаревшее): база данных на основе SQL, больше не поддерживается современными браузерами.

Подробный ответ

Браузерные хранилища — это механизмы, позволяющие сохранять данные на стороне клиента. Они различаются по объему, времени жизни данных и способу доступа. LocalStorage и SessionStorage — это простые key-value хранилища, работающие синхронно. LocalStorage сохраняет данные даже после закрытия браузера, а SessionStorage — только на время сессии (пока открыта вкладка). Cookies — это небольшие фрагменты данных, которые отправляются на сервер с каждым HTTP-запросом. Они часто используются для аутентификации и трекинга. IndexedDB — это мощная NoSQL база данных, позволяющая хранить большие объемы структурированных данных и работать с ними асинхронно. Cache API используется в связке с Service Workers для кэширования ресурсов и обеспечения оффлайн-работы PWA. WebSQL, хотя и устарел, ранее предоставлял SQL-интерфейс для работы с данными в браузере.

Практические примеры

Пример 1

Пример использования LocalStorage для сохранения настроек пользователя:

localStorage.setItem('theme', 'dark');
const theme = localStorage.getItem('theme');
console.log(theme); // 'dark'

Пример 2

Пример работы с IndexedDB для хранения сложных данных:

const request = indexedDB.open('myDatabase', 1);
request.onupgradeneeded = (event) => {
  const db = event.target.result;
  const store = db.createObjectStore('users', { keyPath: 'id' });
};
request.onsuccess = (event) => {
  const db = event.target.result;
  const transaction = db.transaction('users', 'readwrite');
  const store = transaction.objectStore('users');
  store.add({ id: 1, name: 'John' });
};

Пример 3

Пример использования Cache API в Service Worker для кэширования ресурсов:

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request).then((response) => {
      return response || fetch(event.request);
    })
  );
});

Частые ошибки

• Использование LocalStorage для хранения чувствительных данных, таких как токены аутентификации, без дополнительного шифрования.
• Игнорирование ограничений по размеру данных (обычно 5MB для LocalStorage и 4KB для Cookies), что может привести к ошибкам.
• Попытка использовать WebSQL в современных проектах, несмотря на его устаревание и отсутствие поддержки в большинстве браузеров.

Связанные темы

• Service Workers и Progressive Web Apps (PWA)
• Безопасность веб-приложений (CORS, CSP)
• Асинхронное программирование в JavaScript (Promises, async/await)

Follow-up вопросы

В чем ключевая разница между LocalStorage и SessionStorage?

Уровень: basic

LocalStorage сохраняет данные даже после закрытия браузера, а SessionStorage очищается при закрытии вкладки. Оба работают по принципу ключ-значение и имеют одинаковый API (setItem, getItem и т.д.).

Какие ограничения по размеру данных у LocalStorage и Cookies?

Уровень: intermediate

LocalStorage обычно ограничен ~5-10 МБ в зависимости от браузера. Cookies имеют жесткое ограничение ~4 КБ на домен и передаются с каждым HTTP-запросом, что может влиять на производительность.

Когда стоит использовать IndexedDB вместо LocalStorage?

Уровень: intermediate

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

Как обеспечить безопасность данных в браузерных хранилищах?

Уровень: advanced

Никогда не храните чувствительные данные (пароли, токены) в LocalStorage/SessionStorage из-за риска XSS-атак. Для аутентификации лучше использовать HttpOnly cookies. IndexedDB можно защитить через CORS и проверки origin.

Как Cache API связан с Service Workers и PWA?

Уровень: advanced

Cache API позволяет кэшировать ресурсы (HTML, CSS, JS) для работы приложения оффлайн. Вместе с Service Workers это ключевая технология для Progressive Web Apps, обеспечивающая быструю загрузку и устойчивость к плохому соединению.