우리 모두는 window.onstorage를 실행하려면 다음 두 가지 조건이 충족되어야 한다는 것을 알고 있습니다.
간단히 말해서 위의 두 번째 조건은 저장소가 존재하지 않기 때문에 해당 값이 null이거나 기존 저장소를 업데이트하는 경우입니다.
예:
// Storagewindow.localStorage.setItem('a', 123) 초기화; // onstorage 이벤트 등록 window.onstorage = (e) => { console.log(e);} // Storagewindow.localStorage.setItem(' a', 123);위 코드의 마지막 줄은 onstorage 이벤트를 트리거하지 않습니다. a의 값이 변경되지 않았기 때문에 앞뒤로 123이므로 브라우저는 이 업데이트가 유효하지 않다고 판단합니다.
onstorage 이벤트는 브라우저에 의해 트리거되므로 동일한 도메인 이름으로 여러 페이지를 열고 그 중 하나에서 window.localStorage.setItem 메서드를 실행하는 경우(기사 시작 부분에 언급된 두 번째 항목도 확인해야 합니다) 충족) 조건), 다른 페이지가 onstorage 이벤트를 수신하면 해당 페이지의 onstorage 이벤트 콜백이 실행됩니다.
예:
// http://www.example.com/a.html<script>// onstorage 이벤트 등록 window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/b.html<script>// onstorage 이벤트 등록 window.onstorage = (e) => { console.log(e);};</script> // http://www.example.com/c.html<script>// 저장 이벤트 실행 window.localStorage.setItem('a', new Date().getTime());</script>페이지 c가 페이지 a와 b 다음에 열리도록 보장되는 한(세 페이지가 동일한 브라우저 창에 있지 않더라도 창과 탭 페이지의 차이를 구분해야 함) 페이지의 onstorage 이벤트 a와 b가 트리거됩니다.
이제 스토리지 이벤트를 사용하여 페이지 간 통신을 수행하는 방법을 알았으니 이 통신이 우리에게 어떤 용도로 사용됩니까?
실제로 어떤 스토리지 업데이트 작업이 onstorage 이벤트를 트리거했는지만 알면 됩니다. 다른 이벤트 콜백 함수와 마찬가지로 onstorage 이벤트 콜백도 이벤트 객체 매개변수를 받습니다. 이 객체에는 다음과 같은 세 가지 유용한 속성이 있습니다.
이 3가지 주요 속성을 결합하면 페이지 간 데이터 동기화를 달성할 수 있습니다.
마지막으로 localStorage와 sessionStorage의 차이점을 언급하겠습니다.
localStorage에 저장된 데이터에는 만료 시간 설정이 없으며, sessionStorage에 저장된 데이터는 페이지 세션이 끝나면 지워집니다.
위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.