Работает ли sessionStorage в двух открытых вкладках

1.0 Junior🔥 161 комментариев

#JavaScript Core#Браузер и сетевые технологии

Комментарии (1)

🐱

deepseek-v3.2PrepBro AI6 апр. 2026 г.(ред.)

Ответ сгенерирован нейросетью и может содержать ошибки

Механизм работы sessionStorage в нескольких вкладках

Давайте детально разберемся, как sessionStorage ведет себя, когда пользователь открывает несколько вкладок или окон браузера.

Ключевое правило

SessionStorage строго привязан к конкретной вкладке браузера (top-level browsing context) и не является общим между вкладками. Это одно из фундаментальных отличий от localStorage, который совместно используется всеми вкладками одного origin (происхождения).

Как это работает на практике

Каждая новая вкладка/окно = новый, изолированный sessionStorage.

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

"Дублирование" вкладок через window.open() или ссылку target="_blank".

    В этом случае новая вкладка также получает **свой собственный, пустой** экземпляр sessionStorage. Она не наследует данные из родительской вкладки.

// Вкладка 1
sessionStorage.setItem('key', 'значение из первой вкладки');
console.log(sessionStorage.getItem('key')); // 'значение из первой вкладки'

// При открытии Вкладки 2 (через window.open или новую вкладку вручную)
console.log(sessionStorage.getItem('key')); // null - данные отсутствуют!
sessionStorage.setItem('key', 'совсем другое значение');
// Это никак не повлияет на данные в первой вкладке.

Особый случай: открытие страницы в новой вкладке через контекстное меню браузера (клик правой кнопкой -> "Открыть в новой вкладке").

    Поведение может варьироваться в зависимости от браузера и его версии. В некоторых случаях (особенно в старых версиях) новая вкладка может **наследовать** текущий sessionStorage от исходной, делая его общим на некоторое время. Однако это поведение **ненадежно и не является частью стандарта**. Современные браузеры стремятся к строгой изоляции.

Демонстрация изоляции

Рассмотрим простой счетчик, который наглядно демонстрирует независимость sessionStorage:

<!-- index.html -->
<!DOCTYPE html>
<html>
<body>
    <h2>Счетчик в sessionStorage: <span id="counter">0</span></h2>
    <button onclick="increment()">Увеличить</button>
    <button onclick="window.open('index.html')">Открыть копию в новой вкладке</button>

    <script>
        // Инициализируем счетчик, если его нет
        if (!sessionStorage.getItem('counter')) {
            sessionStorage.setItem('counter', '0');
        }
        document.getElementById('counter').textContent = sessionStorage.getItem('counter');

        function increment() {
            let current = parseInt(sessionStorage.getItem('counter'));
            current++;
            sessionStorage.setItem('counter', current.toString());
            document.getElementById('counter').textContent = current;
        }
    </script>
</body>
</html>

При открытии второй вкладки через кнопку "Открыть копию..." вы увидите, что счетчик в ней начнется с 0. Увеличение значения в одной вкладке не будет отражаться в другой.

Сравнение с другими механизмами хранения

Механизм	Область видимости	Время жизни
sessionStorage	Одна вкладка/окно	До закрытия вкладки.
localStorage	Весь браузер (все вкладки одного origin)	Постоянно, до явного удаления.
Cookies	Могут быть доступны всем вкладкам (в зависимости от path/domain)	Задается параметром `expires` или `max-age`.

Когда данные sessionStorage удаляются?

Данные очищаются при закрытии конкретной вкладки. Важно понимать, что поведение браузера при восстановлении сессии (после сбоя или с помощью функции "Восстановить вкладку") может привести к тому, что sessionStorage также будет восстановлен. Это зависит от внутренней реализации браузера.

Стратегии для обмена данными между вкладками

Если вам необходимо передавать данные между вкладками, рассмотрите альтернативы:

localStorage: Идеален для постоянных или долгоживущих данных, общих для всех вкладок.
Событие storage: Позволяет вкладкам реагировать на изменения в localStorage или sessionStorage другой вкладки (хотя для sessionStorage это событие срабатывает только в редких случаях наследования, описанных выше).

// Пример обмена через localStorage + событие
window.addEventListener('storage', function(event) {
    if (event.key === 'sharedData') {
        console.log('Данные обновились в другой вкладке:', event.newValue);
    }
});

// В другой вкладке:
localStorage.setItem('sharedData', JSON.stringify({message: 'Привет из вкладки 2!'}));

Broadcast Channel API / SharedWorker: Современные и мощные API, специально созданные для коммуникации между контекстами браузера.
window.postMessage(): Может использоваться для прямой коммуникации между окнами, если у вас есть на них ссылка.

Заключение

Таким образом, sessionStorage не предназначен и, как правило, не работает для обмена данными между двумя независимо открытыми вкладками браузера. Его ключевая задача — предоставить изолированное, кратковременное хранилище в рамках сессии одной конкретной вкладки. Для сценариев, требующих обмена данными, необходимо выбирать другие инструменты веб-платформы, такие как localStorage в сочетании с событием storage или более специализированные API коммуникации.