使用localStorage进行跨标签页通讯
程序员文章站
2022-07-14 09:23:57
...
什么是localStorage
提起localStorage，往往还牵扯到sessionStorage，它们都是web Storage的API，表示浏览器端数据存储。而区别是，sessionStorage会随着页面的关闭而销毁，localStorage则可永久存储。
标签页间通讯
localStorage的增删改，都会触发其storage事件，通过监听这个事件，控制它的值进行页面通讯。
localStorage的局限
只适用与同源页面，也就是协议，端口，域名相同的页面。
情景描述
用户在网站 A页面 中登录，在B页面退出，A页面与B页面的登录状态保持一致。
demo展示
使用node.js构建服务器，确保A、B页面不违背同源策略
A页面默认登录状态，在B页面退出登录时，A页面也退出登录
A.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>A</title>
</head>
<body>
<p>登录状态:<span class="login">已登录</span></p>
</body>
<script>
localStorage.setItem("login", true);
window.addEventListener('storage',function(e){
if(e.newValue === 'false'){
document.querySelector('.login').textContent = '未登录';
}
})
</script>
</html>B.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>B</title>
</head>
<body>
<button>退出登录</button>
</body>
<script>
var button = document.getElementsByTagName("button")[0];
button.addEventListener('click',function(e){
localStorage.setItem("login",false);
})
</script>
</html>运行效果图：