1. 基于LocalStorage的事件监听机制
在Console输入`window.addEventListener('storage', function(e) { console.log(e.key) })`→打开新标签页修改LocalStorage数据→观察控制台打印键名（验证跨窗口通信触发条件）。
2. 使用BroadcastChannel API广播消息
执行`const bc = new BroadcastChannel('sync-channel')`→在标签A调用`bc.postMessage({type: 'update'})`→在标签B通过`bc.onmessage`接收事件并更新DOM元素。
3. SharedWorker实现后台数据共享
创建`worker.js`文件→写入`onconnect = e => e.ports[0].onmessage = event => postMessage(event.data * 2)`→主页面引入`new SharedWorker('worker.js')`并发送测试数据。
4. IndexedDB数据库同步方案
打开Application面板→点击IndexedDB查看当前数据库→在新标签页执行`db.transaction([], 'readwrite').objectStore('store').put({key: 'sync'})`→对比两个标签页的数据库记录差异。
5. PostMessage跨帧通信限制
在iframe页面运行`window.parent.postMessage({text: 'hello'}, '*')`→父页面监听`window.addEventListener('message', e => alert(e.data.text))`→验证不同源策略下的通信阻断效果。
6. Service Worker缓存同步策略
注册Service Worker脚本`self.addEventListener('install', e => e.waitUntil(caches.open('sync-cache').then(cache => cache.addAll(['/'])))`→在离线状态下修改数据→检查缓存与本地存储的一致性冲突处理。