여러 탭 간 통신 을 실현 하 는 몇 가지 방법

websocket, setInterval + 쿠키, localstorage, Shared Worker 와 postMessage
1.localstorage
localstorage 는 브 라 우 저 여러 탭 이 공유 하 는 저장 공간 이기 때문에 다 중 탭 간 의 통신 을 실현 할 수 있 습 니 다 (ps: session 은 세 션 급 저장 공간 이 고 모든 탭 은 단독 입 니 다).
2.SharedWorker
Shared Worker 는 여러 window 에서 공동으로 사용 할 수 있 지만 이 탭 들 이 모두 같은 소스 (같은 프로 토 콜, 호스트, 포트 번호) 임 을 보증 해 야 합 니 다.
3. websocket 통신
듀 플 렉 스 (full - duplex) 통신 은 자 연 스 럽 게 여러 태그 간 의 통신 을 실현 할 수 있다.
4. 타이머 setInterval + 쿠키
1. 페이지 A 에 setInterval 타 이 머 를 사용 하여 계속 새로 고침 을 설정 하고 Cookies 의 값 이 변 했 는 지 확인 하 며 변 하면 새로 고침 을 수행 합 니 다.
2. Cookies 는 같은 도 메 인 에서 읽 을 수 있 기 때문에 페이지 B 에서 심사 할 때 Cookies 의 값 을 바 꾸 면 페이지 A 는 자 연 스 럽 게 받 을 수 있 습 니 다.
이렇게 하면 확실히 내 가 원 하 는 기능 을 실현 할 수 있 지만, 이러한 방법 은 상당히 자원 을 낭비 하 는 것 이다. 비록 이 성능 이 너무 왕성 한 시대 에 낭비 하고 낭비 하지 않 아 도 느끼 지 못 하지만, 이러한 실현 방안 은 확실히 우아 하지 않다.
5.postMessage
대화 가 필요 한 tab 페이지 는 의존 관계 가 있 습 니 다.
예 를 들 어 A 페이지 에서 JavaScript 의 window. open 을 통 해 B 페이지 를 열거 나 B 페이지 가 iframe 을 통 해 A 페이지 에 삽입 되 는 경우 가 가장 간단 합 니 다. HTML 5 의 window. postmessage API 를 통 해 통신 을 완성 할 수 있 습 니 다. postmessage 함 수 는 window 전역 대상 에 연결 되 어 있 기 때문에 통신 페이지 에 한 페이지 (예 를 들 어 A 페이지) 가 있어 야 다른 페이지 (예 를 들 어 B 페이지) 를 얻 을 수 있 습 니 다.의 window 대상, 이렇게 해야만 단 방향 통신 을 완성 할 수 있 습 니 다. B 페이지 는 A 페이지 의 window 대상 을 가 져 올 필요 가 없습니다. 만약 에 B 페이지 가 A 페이지 에 대한 통신 이 필요 하 다 면 B 페이지 에서 message 사건 을 검색 하고 사건 에서 전달 하 는 source 대상 을 가 져 와 야 합 니 다. 이 대상 은 A 페이지 window 대상 의 참조 입 니 다.

//B  
B  

window.addEventListner('message',(e)=>{
    let {data,source,origin} = e;
    source.postMessage('message echo','/');
});

postmessage 의 첫 번 째 매개 변 수 는 메시지 실체 입 니 다. 구조 화 된 대상 입 니 다. 즉, 'JSON. stringify 와 JSON. parse' 함수 로 복원 할 수 있 는 대상 입 니 다. 두 번 째 매개 변 수 는 메시지 전송 범위 선택 기 입 니 다. '/' 로 설정 하면 같은 소스 의 페이지 에 만 메 시 지 를 보 내 고 '*' 로 설정 하면 모든 페이지 를 보 냅 니 다.
참고 글:https://juejin.im/post/5acdba01f265da23826e5633 https://juejin.im/post/5b0d0a3cf265da092767917f#heading-0 https://segmentfault.com/q/1010000006664804 https://juejin.im/post/59bb7080518825396f4f5177#heading-0 https://segmentfault.com/a/1190000011207317 https://blog.csdn.net/qq_34626003/article/details/70231078 https://www.cnblogs.com/chengdabelief/p/6686070.html https://www.cnblogs.com/chengdabelief/p/6685917.html https://www.jianshu.com/p/31facd4934d7