【引言】
我们知道浏览器有个同域限制,就是说出于安全考虑,浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。上篇提到html5新的
api window.postMessage 可以解决这个问题;最近看到localStorage也可以实现,就做了个例子。
【原理】
浏览器同时打开一个域名下面的多个页面,当其中的一个页面改变 sessionStorage 或 localStorage 的数据时,所有页面的storage 事件都会被触发。
因此,可以通过这种机制,实现多个窗口之间的通信。
【相关函数介绍】
//此处参考阮一峰的javascript标准教程
当储存的数据发生变化时,会触发 storage 事件。我们可以指定这个事件的回调函数。
window.addEventListener(“storage”,onStorageChange);
回调函数接受一个 event 参数。这个 event 对象的 key 属性,保存发生变化的键名。
function onStorageChange(e) {
if(e.key === “key”) {
alert(e.key);
}
}
event 对象的属性还有:
• oldValue:更新前的值。如果该键为新增加,则这个属性为 null。
• newValue:更新后的值。如果该键被删除,则这个属性为 null。
【注意事项】
1. 目前,每个域名的存储上限视浏览器而定,Chrome 是 2.5MB,Firefox 和 Opera 是5MB, IE 是 10MB。其中, Firefox 的存储空间由一级域名
决定,而其他浏览器没有这个限制。也就是说,在 Firefox 中, a.example.com 和 b.example.com共享 5MB 的存储空间。
2. 与 cookie 一样,它们也受同域限制。某个网页存入的数据,只有同域下的网页才能读取。
3. onStorageChange事件在ie中需要注册在document上,在其他浏览器需要注册在window上
4. 兼容性不好,在chrome中设置document.domain之后,监听不到该事件;firefox中可以
【示例】
源码和我上篇博客大致相同:http://blog.csdn.net/bob_baobao/article/details/51000973
【结语】
实现功能和上篇postMessage效果一模一样, 不同点是postMessage是从a窗口发送信息到b窗口,b窗口监听到消息后做出回应;而localStorage是在a窗口改变某一个存储值,b窗口监听到了存储值的变化,然后获取该值,进而完成通信的同样的效果。同理, window.name也可以跨域访问该值,同样也可以完窗口通信的效果。