스토리지 이벤트 소개, js 페이지 간 통신 방법-JS 튜토리얼-php.cn

스토리지 이벤트 소개, js 페이지 간 통신 방법

一个新手

풀어 주다： 2017-10-26 09:45:41

원래의

1585명이 탐색했습니다.

　 페이지를 작성할 때 두 페이지 사이에 데이터나 이벤트를 전송해야 하는 요구 사항이 가끔 발생합니다. 이때 오늘 이야기할 Storage 이벤트를 활용해야 합니다. 이 이벤트를 배우기 전에 먼저 localStorage의 사용법을 이해해야 합니다. 구체적인 사용법은 다른 문서를 참조하세요. 저장 이벤트가 발생하는 조건은 다음과 같습니다.

동일 브라우저에서 동일한 출처의 두 페이지가 열립니다
localStorage가 한 웹 페이지에서 수정됩니다localStorage
另一网页注册了storage

다른 웹 페이지 등록된storage event

storage 이벤트는 동일한 소스 페이지에만 영향을 미치고, 다른 소스에는 영향을 미치지 않습니다. 그렇다면 상동성은 무엇인가?

　URL은 프로토콜, 도메인 이름, 포트, 경로로 구성됩니다. 두 URL의 프로토콜, 도메인 이름, 포트가 동일하면 출처가 동일하다는 의미입니다. 예:

http://www.wszdaodao.cn/demo/index.html
//这个网址，协议是http://域名是www.wszdaodao.cn，端口是80（默认端口可以省略）

//对比URL：
http://www.wszdaodao.cn/demo2/other.html     //同源
http://www.wszdaodao.cn:81/demo/index.html   //不同源
http://sxh.wszdaodao.cn/demo/index.html      //不同源
http://www.mamama.cn/demo/index.html         //不同源

로그인 후 복사

따라서 테스트할 때 소스 페이지가 동일한지 확인하세요.

다음은 두 페이지 간의 상호 작용 코드입니다. 구현은 매우 간단합니다.

페이지 A: localStorage 설정

<!DOCTYPE html>
<html>
<head>
<title>page A</title>
</head>
<body>
<button>click<button>
</body>
<script>
      document.querySelector(&#39;button&#39;).onclick = function(){
              localStorage.setItem(&#39;Num&#39;, Math.random()*10);
      }
</script>
</html>

로그인 후 복사

페이지 B: 스토리지 이벤트 수신

🎜🎜🎜

<!DOCTYPE html>
<html>
<head>
    <title>page B</title>
</head>
<body>
<script>
    window.addEventListener("storage", function (e) {
        console.log(e)
        console.log(e.newValue)
    });
</script>
</body>
</html>

로그인 후 복사

위 내용은 스토리지 이벤트 소개, js 페이지 간 통신 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!