Computer >> 컴퓨터 >  >> 프로그램 작성 >> HTML

HTML DOM 저장 이벤트

<시간/>

HTML DOM 저장 이벤트는 창의 저장 영역에 변경이 있을 때 트리거됩니다. 저장 이벤트는 다른 창이 창의 저장 영역을 변경하는 경우에만 트리거됩니다. 이 이벤트는 버블링되지 않으며 취소할 수도 있습니다.

구문

다음은 −

의 구문입니다.
window.addEventListener("storage", SCRIPT);

예시

Storage Event −

의 예를 살펴보겠습니다.
<!DOCTYPE html>
<html>
<body>
<h1>Storage Event Example</h1>
<p>Create the visit localStorage item by clicking the below button</p>
<button onclick="CreateVisits()">CREATE</button>
<p id="Sample"></p>
<script>
   var y=1;
   window.addEventListener("storage", DisplayChange);
   function DisplayEvent(event) {
      document.getElementById("Sample").innerHTML = "The number of visits has been updated";
   }
   function CreateVisits() {
      y++;
      var x=window.open("","WINDOW_1","width=350,height=350");
      x.localStorage.setItem("VISITS",y);
      setTimeout(function () { x.close();}, 4000);
   }
</script>
</body>
</html>

출력

이것은 다음과 같은 출력을 생성합니다 -

HTML DOM 저장 이벤트

CHECK 버튼을 클릭하면 -

HTML DOM 저장 이벤트

개발자 도구의 콘솔 탭에서 localstorage 입력 시 -

HTML DOM 저장 이벤트