이벤트 핸들러는 로컬 스토리지 객체의 setItem(), removeItem(), clear() 등의 메서드를 사용하여 데이터를 변경할 때마다 실행.
onstorage 이벤트가 발생하면 현재 창/탭에서만 실행됨. (다른 창/탭에서 데이터 변경해도 이벤트 발생 안 함.)
onstorage 이벤트가 크롬에서 작동하지 않는 문제가 발생할 수 있음. 이는 크롬 브라우저의 보안 정책 때문임. (즉, 크롬 브라우저에서는 동일한 출처 정책(Same-Origin Policy)에 따라 localStorage 객체의 변경 사항을 다른 창/탭에서 수신 불가함. 이로 인해 onstorage 이벤트가 작동하지 않을 수 있음. 대신, window.postMessage() 메소드 사용해 다른 창/탭과 통신 가능).
HTML5에서 사용 가능.
3.
지원 않는 최신 브라우저도 존재하므로, 크로스 브라우징 주의.
onstorage 구문
JS 방식 (3가지)
window.onstorage = ()=>{myScript};
window.onstorage = function(){myScript};
window.addEventListener("storage", myScript);
[속성값]
myScript
로컬스토리지 데이터 업데이트 시, 실행할 JS 코드
주의: 함수명 사용 시, 다른 곳은 전부 소괄호까지 사용해 함수 호출하나 핑크색 myScript 자리는 "함수명만" 사용해 함수 호출.
