前端跨标签页通信方案（上）
前情平时开发很少有接触到有什么需求需要实现跨标签页通信，但最近因为一些变故，不得不重新开始找工作了，其中就有面试官问到一道题，跨标签页怎么实现数据通信，我当时只答出二种，面试完后特意重新查资料，因此有些文章
localStorage / sessionStorage
利用localStorage的存储事件实现通信，当一个标签页修改localStorage时，其他同源标签页会触发storage事件
关键代码如下：
标签页1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>page0-localStorage</title>
</head>
<body>
<button id="setCacheBtn">设置本地缓存</button>
</body>
</html>标签页2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>page1-localStorage</title>
</head>
<body>
</body>
</html>动图演示：
提醒：
[*]同源标签才有效
[*]设置不同的本地存储值才有效，如果设置的是同一个缓存值是不会生效的
[*]兼容性非常nice，可以大胆使用了，国内一些浏览器从can i use查不到，但兼容性是没啥问题的
[*]sessionStorage仅在同一标签页的不同 iframe 间有效，不适用于不同标签页
BroadcastChannel
专门用于同源标签页通信的 API，创建一个频道后，所有加入该频道的页面都能收到消息
关键代码如下:
标签页1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BroadcastChannel0</title>
</head>
<body>
<h1>BroadcastChannel0</h1>
<button id="communication">BroadcastChannel0.html 发送消息</button>
</body>
</html>标签页2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BroadcastChannel1</title>
</head>
<body>
<h1>BroadcastChannel1</h1>
</body>
</html>演示动图如下：
提醒：
[*]要通信的标签记得都初始化BroadcastChannel，一定记得使用相同的名称
[*]查询来看除IE外可以大但使用了
小结
这二种是我面试的时候答出来的，第二种我只是模糊记得跟面试官模棱二可的说了说，面试馆给了正面的回应，呵呵……，此文暂时写这么多，下篇继续探索其它方式……
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！ 用心讨论，共获提升！
页:
[1]