Как устроено и где используется Session Storage в браузерах
Краткий ответ
Session Storage сохраняет данные как пары ключ-значение в пределах одной вкладки браузера. Эти данные доступны только во время текущей сессии и исчезают при закрытии вкладки или окна.
Развёрнуто
Краткий ответ
Session Storage — это хранилище данных в браузере, где информация сохраняется в формате пар «ключ-значение» и доступна только в рамках одной вкладки или окна. При закрытии вкладки данные автоматически удаляются.
Как это работает
Session Storage — это объект веб-хранилища, предоставляемый браузерами для сохранения данных на время сессии текущей вкладки. В отличие от localStorage, данные в sessionStorage существуют только пока открыта вкладка, и не разделяются между разными окнами или вкладками, даже если они принадлежат одному домену.
Данные хранятся в формате строк, и доступ к ним происходит через методы setItem(key, value), getItem(key) и другие. Это позволяет быстро сохранять и извлекать временную информацию, например, состояние формы или промежуточные данные пользователя.
| Хранилище | Длительность хранения | Доступность между вкладками | Формат данных |
|---|---|---|---|
| sessionStorage | Пока открыта вкладка/окно | Нет | Строки (ключ-значение) |
| localStorage | Постоянно, до очистки | Да | Строки (ключ-значение) |
Пример
// Сохранение данных в sessionStorage
sessionStorage.setItem('userId', '12345');
// Получение данных из sessionStorage
const userId = sessionStorage.getItem('userId');
// Удаление данных
sessionStorage.removeItem('userId');
// Очистка всего sessionStorage
sessionStorage.clear();
В этом примере мы сохраняем идентификатор пользователя, затем извлекаем его, а после — удаляем или очищаем всё хранилище.
Что важно знать на собеседовании
sessionStorageхранит данные только на время текущей вкладки или окна браузера.- Данные не доступны между разными вкладками, даже если они относятся к одному домену.
- Формат хранения — строки в парах ключ-значение.
- Используется для временного хранения данных, которые не должны сохраняться после закрытия вкладки.
- Отличие от
localStorage:localStorageхранит данные постоянно и доступен в разных вкладках.
Тема: Web-тестирование и DevTools | Уровень: middle