When the data stored using Web Storage changes, the storage event of the Window object will be triggered. We can listen to the event and specify the event handler. When the data saved in localStorage or sessionStorage in other pages changes, the event will be executed. processing function.
The sample code for listening to storage events is as follows:
// window.addEventListener(事件名， 事件处理画数）；
window.addEventListener('storage', function (event) {
console.log(event.key);
}):
In the above code, the event processing function receives an event object as a parameter, and the key attribute of the event object stores the key name of the changed data. The event object has some properties, as shown in the table.
It should be noted that the storage event is not triggered on the current page that causes the data to change. If the browser opens multiple pages under a domain name at the same time, when one of the pages changes the sessionStorage or localStorage data, the storage events of all other pages will be triggered, and the storage event will not be triggered by the original page. Through this mechanism, communication between multiple pages can be achieved.
Since sessionStorage cannot access data from each other in web pages of different tabs, when using the storage event, the page can be placed in the frame created by the iframe tag. At this time, the data changes of the sessionStorage of the outer page can be monitored through the storage event in the frame. .
After having a basic understanding of storage events, let's demonstrate how to use storage events to monitor data in the page. We demonstrate through two pages. The first page demo03-l.html is used to modify localstorage data, and the second page demo03-2.html is used to monitor data changes and achieve data synchronization.
(1) Create C:\codechapter02demo03-1.html, define a text box to enter the user name, and define a "Save" button to save the user name in the text box in localstorage. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<label>用户名：</label><input type="text" id="username">
<button id="save">保存</button>
<script>
var lsername = document.querySelector ('#username');
//单击”保存“按钮，设置数据
document.querySelector('#save').onclick=function() {
var val=username.value; // 获取username里面的值
localStorage.setItem('username', val);
};
</script>
</body>
</html>
In the above code, the text box in line 8 is used to enter user information; lines 13 to 16 are used to set localstorage data.
(2) Save the code and test it in the browser. The effect is as shown in the figure.
Initial page effect
(3) Enter "userl" in the text box shown in Figure 2-8, click the "Save" button, then enter the Application tab of the developer tools, find the Local Storage option and click http:/ under this option /127.0.0.1:5500 address, you can see that the Key value in the set localStorage is "usermame" and the Value value is "userl", as shown in the figure.
Set data
(4) Create C:kcodelchapter02\demo03-2.html, monitor data changes through storage events, and define two labels to display the values before and after the data modification. The specific code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>document</title>
</head>
<body>
<span>新的用户名：</span>
<span id="newval"></span>
<br>
<span>旧的用户名：</span>
<span id="oldval"></span>
<script>
var newdata=document.getElementById('newval');
var olddata=document.getElementById('oldval');
window.addEventListener('storage', function(e){
newdata.innerHTMLme.newValue: //设置元素的内容为修改后的值
olddata.innerHTML=e.oldValue; //设置元素的内容为修改前的值
});
</script>
</body>
</html>
In the above code, the 9th and 12th lines of code define two labels to display the values after the data is modified and before the data is modified; the 16th to 19th lines of code obtain e.newValue and e.oldValue through the storage event. value and displayed in the label.
(5) Save the code and test it in the browser, the effect is shown in Figure 2-10.
Page initial effect
(6) Switch to the demo03-1.html page, enter "user2" in the text box, and click the "Save" button. Then switch to the demo03-2.html web page, the effect is shown in Figure 2-11.
Username after modification and before modification
As can be seen from Figure 2-11, the page displays the new user name "user2" and the old user name "userl". It can be seen that changes in localStorage data can be monitored through storage events.