[Web Storage API] localStorage와 sessionStorage의 차이

LocalStorage vs SessionStorage: 핵심 차이

가장 중요한 차이는 데이터의 생명주기와 공유 범위입니다.

구분	LocalStorage 💾	SessionStorage 📑
생명주기	영구적 (브라우저를 닫아도 유지)	임시적 (탭/창을 닫으면 소멸)
공유 범위	동일 출처의 모든 탭/창에서 공유	하나의 탭/창 내에서만 유효

 

---

보안 장벽: 동일 출처 정책 (Same-Origin Policy)

결제창과 같은 외부 페이지와 내 사이트의 저장소를 직접 공유할 수 없는 근본적인 이유는 바로 이 보안 정책 때문입니다.

• 내 쇼핑몰(myshop.com)과 결제 페이지(kakaopay.com)는 서로 다른 집입니다.
• 브라우저는 보안을 위해 다른 집의 서랍(저장소)을 열어볼 수 없도록 원천적으로 막고 있습니다. 🔒

---

해결책: window.open과 메시지 통신 (코드 예시)

window.open은 다른 집의 문을 열어주는 것과 같지만, 집 안의 물건을 마음대로 가져올 수는 없습니다. 대신 안전한 '인터폰'(postMessage)을 통해 소통합니다.

🏠 부모 창 (내 쇼핑몰)의 코드

// 1. 새 창으로 결제 페이지를 엽니다.
const paymentWindow = window.open('https://payment-gateway.com/pay', '결제창');

// 2. 외부에서 오는 메시지를 받을 '인터폰(리스너)'을 설치합니다.
window.addEventListener('message', (event) => {
  // 보안: 신뢰할 수 있는 출처에서 온 메시지인지 확인합니다.
  if (event.origin !== 'https://payment-gateway.com') {
    return;
  }

  // 4. 결제창에서 보낸 '성공' 메시지를 받습니다.
  if (event.data === 'paymentSuccess') {
    // 5. 메시지를 받은 **'내(부모)가' 스스로** 저장소를 업데이트합니다.
    sessionStorage.setItem('paymentStatus', 'completed');
    alert('결제가 성공적으로 처리되었습니다!');
    paymentWindow.close(); // 확인 후 결제창을 닫아줍니다.
  }
});

💳 자식 창 (결제 페이지)의 코드

// (결제 로직이 성공적으로 완료된 후...)

// 3. 나를 열어준 부모 창(window.opener)에게 '성공했다'는 메시지를 보냅니다.
const targetOrigin = 'https://myshop.com'; // 메시지를 받을 부모 창의 주소
window.opener.postMessage('paymentSuccess', targetOrigin);

이처럼 결제창이 직접 내 사이트의 저장소를 건드리는 것이 아니라, 결제창이 보낸 신호를 받은 내 사이트가 스스로 자신의 저장소를 제어하는 방식입니다.

---

왜 LocalStorage가 아닌 SessionStorage가 '정상 동작'했는가?

결론부터 말하면, '결제'라는 행위의 특성상 탭마다 격리되는 SessionStorage의 특징이 더 적합했기 때문입니다.

기술적으로는 localStorage.setItem() 코드를 넣어도 오류 없이 실행됩니다. 하지만 '정상 동작'으로 보이지 않았을 수 있는 이유는 상태 관리의 범위 문제입니다.

• SessionStorage 사용 시 (정상 동작 👍): 사용자가 A탭에서 상품을 주문하고 결제창을 띄웠다고 가정해 봅시다. 결제 성공 후 sessionStorage에 '결제 완료' 상태가 저장됩니다. 이 정보는 오직 A탭에만 유효합니다. 동시에 사용자가 열어 둔 B탭(다른 상품을 보던 중)에는 아무런 영향을 주지 않습니다. 이것이 우리가 기대하는 '정상적인' 흐름입니다.
• LocalStorage 사용 시 (문제가 될 수 있는 동작 👎): 만약 같은 상황에서 localStorage에 '결제 완료' 상태를 저장했다면, 이 정보는 모든 탭에 공유됩니다. A탭에서 결제를 완료하는 순간, 아무 관련 없는 B탭의 상태까지 '결제 완료'로 인식될 수 있습니다. 이는 의도치 않은 버그를 유발할 수 있어 '비정상적인' 동작으로 간주될 수 있습니다.

따라서 sessionStorage가 '정상 동작'했던 이유는, 하나의 거래는 하나의 탭에서만 격리되어야 한다는 비즈니스 로직과 SessionStorage의 기술적 특징이 완벽하게 일치했기 때문입니다.