js 通过监听storage事件,多页面之间实时数据共享

事件始发文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<input type="text">

<script>
const input=document.querySelector('input');

input.onkeyup=()=>{
localStorage.setItem("test",input.value);
}
</script>
</body>
</html>

事件接收文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script>
//事件监听写法:
window.addEventListener("storage",(e)=>{
console.log(e)
console.log("新值:",e.newValue)
})

//普通事件写法:
/* window.onstorage=(e)=>{
console.log(e)
console.log("新值:",e.newValue)
}*/
</script>
</body>
</html>

效果:
js 通过监听storage事件,多页面之间实时数据共享

js 通过监听storage事件,多页面之间实时数据共享


js 通过监听storage事件,多页面之间实时数据共享
https://github.com/chergn/chergn.github.io/63d9ea3da13e/
作者
全易
发布于
2024年3月28日
许可协议