前端跨标签页通信方案（上）

技术分享 4个月前 (11-10) 0 999+

关注

前情

平时开发很少有接触到有什么需求需要实现跨标签页通信，但最近因为一些变故，不得不重新开始找工作了，其中就有面试官问到一道题，跨标签页怎么实现数据通信，我当时只答出二种，面试完后特意重新查资料，因此有些文章

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>   <script>     document.getElementById('setCacheBtn').addEventListener('click', () => {       localStorage.setItem('message', JSON.stringify({         type: 'greeting',         // 这里为了保证通信每次生效，每次都设置不同的值         content: 'Hello from page0.html' + Date.now()       }));     });   </script> </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>   <script>     window.addEventListener('storage', (e) => {       if (e.key === 'message') {         const data = JSON.parse(e.newValue);         console.log('Received:page1.html', data);       }     });   </script> </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>   <script>     // 所有页面都创建相同名称的频道     const channel = new BroadcastChannel('my_channel');      // 发送消息     document.getElementById('communication').addEventListener('click', () => {       channel.postMessage({ type: 'update', data: 'new content from BroadcastChannel0.html' });     });   </script> </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>   <script>     // 所有页面都创建相同名称的频道     const channel = new BroadcastChannel('my_channel');      // 接收消息     channel.onmessage = (e) => {       console.log('Received:BroadcastChannel1.html', e.data);     };   </script> </body> </html>

演示动图如下：