[번역] sessionStorage가 다른 탭 간에 공유되지 않는 이유

Inkyu Oh

Front-End•2026.01.02

원문: https://juejin.cn/post/7581893894175637514

皮蛋小精灵 - 2025-12-10T08:58:38+00:00

이 질문은 매우 고전적인 프론트엔드 면접 질문이자, 실제 개발 과정에서 오해하기 쉬운 부분입니다.

간단하고 명확한 답변은 다음과 같습니다: 이것은 W3C 표준에 의해 명확하게 설계된 것입니다. sessionStorage의 설계 의도는 "공유"가 아니라 "격리"에 있습니다.

이 글은 그 논리를 완전히 이해하는 데 도움이 되는 상세한 심층 분석입니다.

1. 핵심 정의: "세션(Session)"이란 무엇인가?

sessionStorage의 맥락에서 "세션"의 정의 범위는 현재 탭(Tab) 또는 현재 창(Window) 내부로 엄격하게 제한됩니다.

LocalStorage의 범위: 동일 출처(Same Origin) + 브라우저 인스턴스. 도메인만 같다면 모든 탭이 데이터를 공유합니다.

SessionStorage의 범위: 동일 출처 + 최상위 브라우징 컨텍스트(Top-level Browsing Context). 즉, 하나의 탭이 하나의 독립적인 세션이 됩니다.

2. 설계 목적: "다중 창 병렬 작업"을 위해

공유되지 않는 것이 번거롭다고 느낄 수 있지만, 이 설계는 사실 여러 창 사이의 데이터 간섭을 방지한다는 페인 포인트를 해결하기 위한 것입니다.

시나리오 예시를 들어보겠습니다:

티켓 예매 사이트에서 동시에 두 개의 탭을 열었다고 가정해 봅시다.

탭 A: 장삼을 도와서 베이징행 티켓을 예매 중입니다.

탭 B: 리사를 도와서 상하이행 티켓을 예매 중입니다.

만약 sessionStorage가 탭 간에 공유된다면:

탭 A에서 "베이징"을 선택하고 Storage에 저장합니다.

탭 B에서 "상하이"를 선택하면 데이터가 덮어씌워집니다.

다시 탭 A로 돌아와 제출을 클릭하면, 시스템은 최신 데이터인 "상하이"를 읽게 되어 장삼이 엉뚱한 티켓을 구매하게 됩니다.

sessionStorage의 격리 특성 덕분에:

탭 A와 탭 B는 완전히 독립적인 저장 공간을 가지며 서로 간섭하지 않습니다. 이를 통해 사용자는 상태가 뒤섞일 걱정 없이 동일한 웹사이트에서 여러 개의 독립적인 비즈니스 프로세스를 동시에 진행할 수 있습니다.

3. 특별한 예외: 탭 복제

서로 다른 탭은 공유되지 않지만, 주의해야 할 특수한 상황이 하나 있습니다.

만약 "우클릭 -> 탭 복제"를 하거나 스크립트에서 window.open()을 사용하여 동일 출처의 페이지를 여는 경우:

새 탭은 기존 탭의 sessionStorage 데이터를 "복사"합니다.

하지만! 이것은 단지 복사(Copy)일 뿐, 동기화(Sync)가 아닙니다.

복사가 완료된 후 두 탭의 데이터 연결은 끊어집니다. 새 탭에서 데이터를 수정해도 기존 탭은 변하지 않으며, 그 반대도 마찬가지입니다.

4. 반드시 탭 간에 데이터를 공유해야 한다면 어떻게 해야 할까요?

현재 비즈니스 시나리오에서 서로 다른 탭 간의 데이터 동기화가 정말로 필요하다면(예: 한 탭에서 로그인하면 다른 탭에서도 자동으로 로그인 상태가 업데이트됨), sessionStorage 대신 다음과 같은 대안을 사용해야 합니다.

방안 A: LocalStorage + storage 이벤트

가장 흔히 사용되는 방안입니다. localStorage는 탭 간에 공유됩니다. storage 이벤트를 리스닝하여 다른 탭의 수정을 감지할 수 있습니다.

// 탭 A에서 데이터 수정
localStorage.setItem('token', '12345');
// 탭 B에서 변화 감지
window.addEventListener('storage', (event) => {
  if (event.key === 'token') {
    console.log('다른 탭에서 Token을 수정했습니다. 저도 상태를 업데이트해야 합니다!');
  }
});

방안 B: Broadcast Channel API

동일 출처 내의 서로 다른 컨텍스트(탭, Iframe, Worker) 간 통신을 위해 설계된 더 현대적이고 우아한 API입니다.

// 탭 A
const channel = new BroadcastChannel('app_channel');
channel.postMessage('Hello Tab B');
// 탭 B
const channel = new BroadcastChannel('app_channel');
channel.onmessage = (msg) => {
  console.log(msg.data); // 'Hello Tab B' 수신
};