localStorage

一个页面通过storage存储消息,另一个页面监听storage捕获消息

storage只能够监听同一浏览器下同源且非同一页面中的storage变化,sessionStorage只在同一会话中共享

1
2
//页面1
localStorage.setItems("msg", 1111)
1
2
3
4
//页面2
window.addEventListener("storage",e=> {
console.log(e.newValue)
})

一个页面向cookie中存储消息,另一个页面通过轮巡监听cookie捕获消息

postMessage

window.postMessage() 方法可以安全地实现跨源通信。通常,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机 (两个页面的模数 Document.domain设置为相同的值) 时,这两个脚本才能相互通信。window.postMessage() 方法提供了一种受控机制来规避此限制,只要正确的使用,这种方法就很安全。

1
otherWindow.postMessage(message, targetOrigin, [transfer]);