HTML5 postMessage 和 localStorage 实现窗口间通信

LocalStorage（不能跨域）

基本思想：通过localStorage的标准事件storage来实现跨页面通信，即页面A通过写入特定数据触发页面B的storage事件，页面B响应之后再写入数据通知页面A处理结果；

引言

随着Web技术的发展，涌出了越来越多的复杂的应用。诸多Web应用逐渐向增强用户体验方向发展。在诸如付款、在线聊天等场景中，有时需要多页面进行数据通信。以前的实现方法有cookie、服务器中转、Flash插件等方法，而HTML5提供了新的LocalStorage API，能够更为便捷的实现跨页面通信，且相比以前的技术有容量大、效率高、无需插件等优点。

“What”能实现什么

LocalStorage API被IE8+及Firefox、Chrome、Safari等主流浏览器所支持。利用localStorage能够实现数据的存储，而通过监控数据的写入，页面可以获得其它页面想要传达的信息。

在“在线聊天”功能中，服务器与客户端的数据通信需要占用大量的带宽和服务器计算时间，而如果一个浏览器同时打开了多个窗口更是雪上加霜。作为一个绿色环保的程序员，相对于堆服务器，我们应该立足于解决带宽与计算量的浪费，而通过跨页面的协同合作，我们可以实现多个页面之间可以共享一条数据通道，同时节省了服务器和客户端的消耗。

其它的诸如微博等应用的“换肤”功能，如果能够实现打开的多个窗口同时更换皮肤，势必能够提高用户的体验。

“Where”用在何处

上面已经提及了两处应用场景，实际上任何Web应用都应该考虑多窗口的情形。用于在窗口之间切换时，如何实现无障碍的应用体验？产品经理总是抱怨打开了多个窗口怎么就不能实现联动？在一个窗口登录了其它窗口怎么就非得刷新才能使用一些功能？这些统统可以通过跨页面通信解决。

“How”怎么实现

HTML5 LocalStorage API中包含了"storage"事件。通过监听window对象的storage事件，可以在其它页面窗口调用localStorage的存储方法时，得到通知。为了进行跨页面通信事件与普通存储事件的区分。

Storage类有两个主要对象：localStorage和sessionStorage

属性：

length window.localStorage.length 有多少名值对存放在Storage对象中

方法：

setItem(name,value) window.localStrorage.setItem()

removeItem(name)

getItem(name)

key(index) 获取index位置处的值的名字name

clear() 删除所有值

事件：

storage

对Storage对象进行任何修改都会在文档上触发storage事件

侦听storage事件

window.addEventListener("storage",function(event){...});

event 对象有以下属性：

domain：发生变化的存储空间的域名

key：设置或者删除的键名

newValue：设置--新值删除--null

oldValue：键更改前的值

postMessage

发送： otherWindow.postMessage(message, targetOrigin, [transfer]); //调用postMessage方法的window对象是指要接收消息的那一个window对象

监听： message事件 window.addEventListener( "message", function(event) {alert(event.data);})

假设在a.html里嵌套个<iframe src="http://www.b.com/b.html" frameborder="0"></iframe>,在这两个页面里互相通信

示例：

a.com/a.html

 window.onload = function() {
        window.addEventListener("message", function(event) {
            alert(event.data);
        });
      //  window.frames[0].postMessage("b data", "http://www.b.com/b.html");  //调用postMessage方法的window对象是指要接收消息的那一个window对象
    }

b.com/b.html

window.onload = function() {
   //      window.addEventListener("message", function(event) {
  //          alert(event.data);
 //       });
        window.parent.postMessage("a需要的数据", "http://www.a.com/a.html");
    }

对比：

postMessage是从a窗口发送信息到b窗口，b窗口监听到消息后做出回应；而localStorage是在a窗口改变某一个存储值，b窗口监听到了存储值的变化，然后获取该值，进而完成通信的同样的效果。

posted @ 2017-04-09 19:09 小猫慢慢爬阅读(2477) 评论(0) 编辑收藏举报

刷新页面返回顶部