집 > 기사 > 웹 프론트엔드 > 스토리지 이벤트를 사용하여 페이지 간 통신을 구현하기 위한 샘플 코드

스토리지 이벤트를 사용하여 페이지 간 통신을 구현하기 위한 샘플 코드

青灯夜游앞으로: 2018-10-09 16:46:511877검색

이 글은 페이지 간 통신을 위해 Storage Event를 사용하기 위한 샘플 코드에 대한 관련 정보를 주로 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

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

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

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

예:

// 初始化storage
window.localStorage.setItem(&#39;a&#39;, 123);

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

// 更新storage
window.localStorage.setItem(&#39;a&#39;, 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(&#39;a&#39;, new Date().getTime());
</script>

페이지 c가 페이지 a와 b 다음에 열리는 한(세 페이지가 같은 브라우저 창에 있지 않으면 창과 탭을 구분해야 합니다) 페이지), 그러면 페이지 a와 b의 onstorage 이벤트가 트리거됩니다

이제 페이지 간 통신을 위해 스토리지 이벤트를 사용하는 방법을 알았으니, 이 통신이 우리를 위해 사용됩니까?

사실 어떤 스토리지 업데이트 작업이 스토리지 이벤트를 유발했는지만 알면 됩니다. 다른 이벤트 콜백 함수와 마찬가지로 onstorage 이벤트 콜백도 이벤트 개체 매개변수를 받습니다. 이 개체에는 다음과 같은 세 가지 유용한 속성이 있습니다.

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

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

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

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

요약: 위는 이 글의 전체 내용입니다. 모두가 학습하는 데 도움이 되기를 바랍니다. 도움이됩니다. 더 많은 관련 튜토리얼을 보려면 Html5 비디오 튜토리얼을 방문하세요!

스토리지 이벤트를 사용하여 페이지 간 통신을 구현하기 위한 샘플 코드

관련 기사