HTML5/자바스크립트 스토리지 이벤트 핸들러란?
HTML5의 웹 스토리지(Web Storage) API를 사용하다 보면 스토리지(storage) 이벤트를 활용해야 하는 경우가 있습니다. 스토리지 이벤트는 localStorage나 sessionStorage에 저장된 데이터가 변경될 때 발생하는 이벤트로, 여러 창이나 탭 간에 데이터 변경 사항을 실시간으로 동기화할 때 매우 유용합니다.
주의: 다른 창에서 발생한 이벤트만 감지됩니다
스토리지 이벤트 핸들러는 동일한 페이지가 아닌, 다른 창(또는 탭)에서 스토리지 변경이 발생했을 때만 실행된다는 점을 반드시 기억해야 합니다. 즉, 같은 창 내에서 setItem()을 호출하면 해당 창의 스토리지 이벤트 핸들러는 작동하지 않습니다. 이는 의도된 동작으로, 무한 루프와 같은 문제를 방지하기 위한 설계입니다.
스토리지 이벤트 핸들러 구현 예제
아래 코드는 window.addEventListener() 메서드를 사용하여 'storage' 이벤트를 등록하고, 변경된 키(key) 값에 따라 서로 다른 함수를 호출하는 예제입니다:
// 이벤트 핸들러 등록
window.addEventListener('storage', storageEventHandlerFunc, false);
function storageEventHandlerFunc(evt) {
alert("Storage event called key: " + evt.key);
switch(evt.key){
case 'one':
case 'two': batteryDCMeter(); break;
case 'extPowerOn': rechargeBattery(); break;
}
}
sessionStorage.setItem("someKey", "someValue");코드 설명
- window.addEventListener('storage', ...): 'storage' 이벤트가 발생할 때마다 지정된 핸들러 함수를 실행하도록 등록합니다.
- evt.key: 이벤트 객체에는 변경된 키 이름이 담겨 있어, 어떤 항목이 수정되었는지 확인할 수 있습니다.
- switch 문: 키 값('one', 'two', 'extPowerOn')에 따라 배터리 측정(
batteryDCMeter()) 또는 배터리 충전(rechargeBattery()) 같은 특정 동작을 수행합니다.
스토리지 이벤트 객체의 주요 속성
스토리지 이벤트 핸들러에서 활용할 수 있는 주요 속성은 다음과 같습니다:
- key: 변경된 항목의 키 이름 (항목이 삭제된 경우 null)
- oldValue: 변경 전의 기존 값
- newValue: 변경 후의 새로운 값
- url: 변경이 발생한 문서의 URL
- storageArea: 변경이 일어난 Storage 객체(localStorage 또는 sessionStorage)
활용 시나리오
이러한 스토리지 이벤트 핸들러는 다음과 같은 상황에서 특히 유용합니다:
- 여러 탭에서 로그인/로그아웃 상태를 실시간으로 동기화할 때
- 사용자 설정(테마, 언어 등) 변경 사항을 모든 열려 있는 창에 즉시 반영할 때
- 임베디드 환경에서 외부 전원 연결 여부와 같은 하드웨어 상태 변화를 감지할 때
단, 위 예제처럼 sessionStorage.setItem()을 같은 창에서 직접 호출하면 해당 창의 핸들러는 실행되지 않으므로, 테스트 시에는 두 개 이상의 창이나 탭을 열어 확인하는 것이 좋습니다.