HTML DOM의 storage 이벤트는 브라우저 창(window)의 저장 영역(storage area)에 변경이 발생했을 때 트리거됩니다. 특히 이 이벤트는 같은 창이 아니라 다른 창이 해당 창의 저장 영역을 변경할 때에만 발생한다는 점이 중요한 특징입니다.
주요 특징
- localStorage 또는 sessionStorage의 데이터가 변경될 때 발생합니다.
- 다른 창(다른 탭 포함)에서 저장 영역이 변경되었을 때만 트리거됩니다.
- 변경된 키(key), 이전 값(oldValue), 새 값(newValue), 관련 URL 등의 상세 정보를 이벤트 객체를 통해 확인할 수 있습니다.
문법(Syntax)
storage 이벤트를 등록하는 기본 문법은 다음과 같습니다.
window.addEventListener("storage", SCRIPT);예제
아래 예제는 버튼을 클릭하면 새 창을 연 뒤 localStorage에 방문 횟수(VISITS) 항목을 갱신하고, 4초 후 해당 창을 자동으로 닫는 코드입니다. storage 이벤트가 발생하면 화면에 변경 알림 메시지가 표시됩니다.
<!DOCTYPE html>
<html>
<body>
<h1>Storage Event Example</h1>
<p>아래 버튼을 클릭하면 localStorage에 VISITS 항목이 생성·갱신됩니다.</p>
<button onclick="CreateVisits()">CREATE</button>
<p id="Sample"></p>
<script>
var y = 1;
window.addEventListener("storage", DisplayEvent);
function DisplayEvent(event) {
document.getElementById("Sample").innerHTML = "방문 횟수가 업데이트되었습니다.";
}
function CreateVisits() {
y++;
var x = window.open("", "WINDOW_1", "width=350,height=350");
x.localStorage.setItem("VISITS", y);
setTimeout(function () { x.close(); }, 4000);
}
</script>
</body>
</html>실행 결과
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
CREATE 버튼을 클릭하면 새 창이 열리고, 해당 창의 localStorage에 VISITS 값이 저장됩니다.
개발자 도구의 콘솔 탭에서 localStorage를 직접 조회하면 저장된 값을 확인할 수 있습니다.
