跨标签页通信
建议搭配 Live Server 使用以下代码 绝对可用
1.localStorage
实现方式:localStorage.setItem + window.addEventListener(‘storage’,cb)
完整代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<button class="btn">点击发送消息</button>
<script>
let btn = document.querySelector(".btn");
btn.addEventListener("click", () => {
localStorage.setItem(
"send",
JSON.stringify({
name: "Haoxuan",
age: "25",
})
);
});
window.addEventListener("storage", (data) => {
try {
console.log(JSON.parse(data.newValue)); // {name:"Haoxuan", age: "24"}
console.log(data); // data 有很多数据 需要可以自行打印查看
} catch (err) {
// 捕获异常
}
});
</script>
</body>
</html>
每次需要修改发送的值才可以看到变化 localStorage.setItem(‘send’,
不同的值)
BroadCast Channel
实现方式:new BroadcastChannel()
完整代码
A.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
</head>
<body>
<div>发送消息页面</div>
<button class="btn">点击发送消息</button>
<script>
最低0.47元/天 解锁文章
1037
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
