JS窗口间通信--localStorage

【引言】

我们知道浏览器有个同域限制，就是说出于安全考虑，浏览器只允许脚本与同样协议、同样域名、同样端口的地址进行通信。上篇提到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也可以跨域访问该值，同样也可以完窗口通信的效果。