JavaScript 페이지 간 통신 방식의 저장 이벤트에 대한 자세한 설명
- 黄舟원래의
- 2017-10-26 09:43:241426검색
페이지를 작성할 때 두 페이지 사이에 데이터나 이벤트를 전송해야 하는 요구 사항이 가끔 발생합니다. 이때 오늘 이야기할 Storage 이벤트를 활용해야 합니다. 이 이벤트를 배우기 전에 먼저 localStorage의 사용법을 이해해야 합니다. 구체적인 사용법은 다른 문서를 참조하세요. 저장 이벤트가 발생하는 조건은 다음과 같습니다.
동일 브라우저에서 동일한 출처의 두 페이지가 열립니다
localStorage가 한 웹 페이지에서 수정됩니다localStorage另一网页注册了
storage
storage event
storage 이벤트는 동일한 소스 페이지에만 영향을 미치고, 다른 소스에는 영향을 미치지 않습니다. 그렇다면 상동성은 무엇인가?
URL은 프로토콜, 도메인 이름, 포트, 경로로 구성됩니다. 두 URL의 프로토콜, 도메인 이름, 포트가 동일하면 출처가 동일하다는 의미입니다. 예:
1 2 //这个网址，协议是 3 4 //对比URL： 5 http://www.wszdaodao.cn/demo2/other.html //同源 6 http://www.wszdaodao.cn:81/demo/index.html //不同源 7 http://sxh.wszdaodao.cn/demo/index.html //不同源 8 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('button').onclick = function(){
localStorage.setItem('Num', 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>
위 내용은 JavaScript 페이지 간 통신 방식의 저장 이벤트에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!