如何优雅地在浏览器的窗口(或标签)之间传递消息?
看到有利用 localStorage 或者 sessionStorage 来传递消息,一遍又一遍地查询localStrorage有没有变化实在太不优雅了。
html5的
postMessage
api 是设计给跨文档(域)消息传递的,可以拿来用吗?
有没有其他更好的办法呢?
浏览器 postmessage html5 JavaScript
Answers
可以监听
window
的
storage
事件
window.addEventListener("storage", function(e) {
console.log(e)
}, false)
e
中比较有用的属性是
-
e.key
:发生变化的key
-
e.oldValue
:旧的值 -
e.newValue
:新的值
如果是调用的
localStorage.clear()
,则
e.key
的值是
null
(测试结果,不一定在每个浏览器上都一样)
还有一点需要注意的就是,在一个
window
上监听了
storage
事件,需要在另一个窗口(或标签)上调用
localStorate.setItem()
,
localStorage.removeItem()
或者
localStorage.clear()
才会触这个
window
上的事件(多个
window
监听除了自己应该都可以触发,没试验,试下就知道了)
有人说必须要调用
setItem
removeItem
或
clear
才会触发事件,实测直接改变值也会触发,如
localStorage.test = "hello storage"
备注:我用的 猎豹浏览器 测试