이벤트 핸들러는 로컬 스토리지 객체의 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 자리는 "함수명만" 사용해 함수 호출.
1. 채팅창 헤드에서 접속자 확인2. 닉네임 클릭해 1:1 채팅 가능 3. 닉네임 클릭해 귓속말 가능 4. 닉네임 클릭해 호출하기 가능 5. 우하단 클릭해 환경 설정 가능 6. 의뢰글 작성 후 의뢰 상담 가능 7. 질문글 작성 후 질문 상담 가능8. 채팅방에 개인정보 입력 금지9. 채팅방에 광고 욕설 비방 금지
