Computer >> Máy Tính >  >> Lập trình >> HTML

Sự kiện lưu trữ DOM HTML

Sự kiện lưu trữ DOM HTML kích hoạt khi có sự thay đổi trong vùng lưu trữ của cửa sổ. Sự kiện lưu trữ chỉ được kích hoạt nếu cửa sổ khác làm cho vùng lưu trữ thay đổi cho một cửa sổ. Sự kiện này không bong bóng và cũng có thể bị hủy.

Cú pháp

Sau đây là cú pháp cho -

window.addEventListener("storage", SCRIPT);

Ví dụ

Hãy để chúng tôi xem xét một ví dụ cho Sự kiện lưu trữ -

<!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>

Đầu ra

Điều này sẽ tạo ra kết quả sau -

Sự kiện lưu trữ DOM HTML

Khi nhấp vào nút KIỂM TRA -

Sự kiện lưu trữ DOM HTML

Khi nhập localstorage trong tab bảng điều khiển trong công cụ dành cho nhà phát triển -

Sự kiện lưu trữ DOM HTML