집 > 기사 > 웹 프론트엔드 > 저장소 이벤트가 페이지 간 통신을 구현하는 방법

저장소 이벤트가 페이지 간 통신을 구현하는 방법

不言원래의: 2018-07-24 09:58:202528검색

이 글에서 공유한 내용은 Storage Event가 페이지 간 통신을 구현하는 방법에 대한 내용이며, 도움이 필요한 친구들에게 도움이 되기를 바랍니다.

window.onstorage를 실행하려면 다음 두 가지 조건이 충족되어야 한다는 사실은 모두가 알고 있습니다.

localStorage.setItem 또는 sessionStorage.setItem을 통해 특정 저장소를 저장(업데이트)
이 저장소를 저장(업데이트)할 때, 새로운 값은 이전 값과 달라야 합니다

위의 두 번째 조건은 간단히 말해서 저장소가 존재하지 않기 때문에 저장소의 초기화이거나 해당 값이 null이거나 업데이트입니다. 기존 저장소

예:

// 初始化storage
window.localStorage.setItem('a', 123);

// 注册onstorage事件
window.onstorage = (e) => {
  console.log(e);
};

// 更新storage
window.localStorage.setItem('a', 123);

위 코드의 마지막 줄은 onstorage 이벤트를 트리거하지 않습니다. 왜냐하면 a의 값이 변경되지 않았기 때문입니다. 전후 값은 123이므로 브라우저는 이 업데이트가 유효하지 않다고 판단합니다

Since 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>
// 触发onstorage事件
window.localStorage.setItem('a', new Date().getTime());
</script>

페이지 a와 페이지 b 다음에 c 페이지가 열리는 한( 세 페이지가 동일한 브라우저 창에 있지 않으므로 여기서 창을 구별해야 합니다. (탭 페이지와 다름) 그러면 페이지 a와 b의 onstorage 이벤트가 트리거됩니다

이제 스토리지 이벤트를 사용하여 달성하는 방법을 알았습니다. 페이지 간 커뮤니케이션, 이 커뮤니케이션이 우리에게 무슨 소용이 있을까요?
실제로 어떤 스토리지 업데이트 작업이 onstorage 이벤트를 유발했는지만 알면 됩니다. 다른 이벤트 콜백 함수와 마찬가지로 onstorage 이벤트 콜백도 이벤트 개체 매개변수를 받습니다. 이 개체에는 다음과 같은 세 가지 유용한 속성이 있습니다.

key 초기화되거나 업데이트된 저장소의 키 이름
저장소가 초기화되거나 업데이트되기 전의 값
newValue는 저장소가 초기화되거나 업데이트된 후의 값입니다

이 세 가지 주요 속성을 결합하면 페이지 간 데이터 동기화를 달성할 수 있습니다

마지막으로 localStorage에 대해 언급하겠습니다. 차이점 with sessionStorage

localStorage에 저장된 데이터에는 만료 시간 설정이 없으며, sessionStorage에 저장된 데이터는 페이지 세션이 끝나면 지워집니다

저장소 이벤트가 페이지 간 통신을 구현하는 방법

관련 기사