Session Storage — это технология, представленная в спецификации HTML5, которая позволяет веб-приложениям хранить данные локально в браузере пользователя, но только в течение одной сессии. В отличие от Local Storage, данные, сохранённые в Session Storage, автоматически удаляются, как только пользователь закрывает вкладку или окно браузера.

Основные особенности Session Storage

• Хранение данных в формате ключ-значение (key-value).
• Данные доступны только в той вкладке, в которой они были записаны.
• Информация не передаётся на сервер при HTTP-запросах.
• После закрытия вкладки или окна браузера данные полностью удаляются.

Пример использования

// Сохраняем данные

sessionStorage.setItem("username", "Jane");

// Получаем данные

const username = sessionStorage.getItem("username");

// Удаляем конкретный элемент

sessionStorage.removeItem("username");

// Очищаем всё хранилище

sessionStorage.clear();

Если необходимо сохранить сложный объект, его нужно сериализовать в строку с помощью JSON.stringify():

const user = {

name: "Jane",

age: 25

};

sessionStorage.setItem("user", JSON.stringify(user));

const savedUser = JSON.parse(sessionStorage.getItem("user"));

console.log(savedUser.name); // "Jane"

Преимущества Session Storage

• Изоляция вкладок: каждая вкладка имеет собственное хранилище, что предотвращает конфликты данных между ними.
• Простота использования: API включает всего несколько методов (setItem, getItem, removeItem, clear).
• Автоматическое удаление: данные не нужно вручную очищать — они исчезают вместе с закрытием вкладки.
• Быстрая работа: чтение и запись происходят мгновенно.

Ограничения и замечания

• Недолговечность: данные не сохраняются после закрытия вкладки.
• Небезопасно для чувствительных данных: информация может быть прочитана через инструменты разработчика.
• Ограничение по размеру: обычно доступно около 5 МБ.

Сравнение с Local Storage

Local Storage сохраняет данные на неопределённый срок — информация остаётся в браузере до тех пор, пока пользователь сам не удалит её вручную. В отличие от него, Session Storage хранит данные только в течение одной сессии: как только пользователь закрывает вкладку или окно браузера, данные автоматически удаляются.

Local Storage доступен во всех вкладках, открытых на одном и том же домене, что позволяет использовать одни и те же данные между разными вкладками. Session Storage, напротив, создаёт отдельное хранилище для каждой вкладки, и данные в одной вкладке не видны в другой.

Оба типа хранилищ — и Local Storage, и Session Storage — могут содержать примерно до 5 МБ данных, хотя этот объём может немного варьироваться в зависимости от браузера.

Кроме того, данные, сохранённые в этих хранилищах, не отправляются на сервер автоматически при выполнении HTTP-запросов — они остаются исключительно на стороне клиента (в браузере пользователя).

Примеры использования

• Сохранение данных форм во время заполнения (чтобы они не потерялись при случайном обновлении страницы).
• Хранение временных параметров пользователя (например, фильтров или сортировки).
• Временное сохранение состояния компонентов или страниц внутри одной сессии.

Заключение

Session Storage — это удобный способ временного хранения данных на стороне клиента без необходимости обращаться к серверу. Он особенно полезен в тех случаях, когда данные должны существовать только в пределах одной сессии браузера. Однако при необходимости долговременного хранения или межвкладочной синхронизации предпочтительнее использовать Local Storage или IndexedDB.