利用HTML5 LocalStorage实现跨页面通信channel

引言

随着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的存储方法时，得到通知。为了进行跨页面通信事件与普通存储事件的区分，我封装了一个channel库，可以通过命名空间进行数据的监听。

channel库代码如下：

 1 /**
 2  * Channel.js: Browser support for multipage communication
 3  *
 4  * @author Kyriosli
 5  */
 6 var channel = function(entry) {
 7     var listeners = {};
 8
 9     if (/MSIE 8/.test(navigator.userAgent)) {
10         window.attachEvent('storage', function() {
11             // TODO: ie8 support
12         });
13     } else {
14         window.addEventListener('storage', function(e) {
15             if (e.newValue !== null && /^channel\.(.+)/.test(e.key)) {
16                 broadcast(RegExp.$1, e.newValue);
17             }
18         });
19     }
20
21     function broadcast(channelName, str) {
22         if (channelName in listeners) {
23             var value = JSON.parse(str);
24             for ( var i = 0, arr = listeners[channelName], L = arr.length; i < L; i++) {
25                 try {
26                     arr[i](value);
27                 } catch (e) {
28                     console.error(e.stack);
29                 }
30             }
31         }
32     }
33
34     return {
35         /**
36          * 发布数据到其它页面
37          *
38          * @param name
39          *            命名空间名称
40          * @param value
41          *            要发布的数据
42          * @returns this
43          */
44         post : function(name, value) {
45             entry["channel." + name] = JSON.stringify(value);
46             setTimeout(function() {
47                 entry.removeItem("channel." + name);
48             }, 0);
49             return this;
50         },
51         /**
52          * 注册监听器
53          *
54          * @param name
55          *            要监听的命名空间
56          * @param callback
57          *            回调函数
58          * @returns this
59          */
60         on : function(name, callback) {
61             if (name in listeners) {
62                 listeners[name].push(callback);
63             } else {
64                 listeners[name] = [ callback ];
65             }
66             return this;
67         },
68         /**
69          * 取消监听器
70          *
71          * @param name
72          *            要取消监听的命名空间
73          * @param callback
74          *            回调函数，如果为空，则取消所有监听函数
75          * @returns this
76          */
77         off : function(name, callback) {
78             var arr = listeners[name];
79             if (arr) {
80                 if (!callback) {
81                     delete listeners[name];
82                 } else {
83                     var i = arr.length;
84                     while (i--) {
85                         if (arr[i] === callback) {
86                             arr.splice(i, 1);
87                         }
88                     }
89                 }
90             }
91             return this;
92         }
93     };
94 }(localStorage);

channel有3个函数：post,on,off。当窗口A调用了on函数，窗口B调用post函数时，窗口A就会收到事件。如：

// 窗口A
channel.on('abcde', function(data) {console.log(data);
});// 窗口B
channel.post('abcde', "Hello world");

那么窗口A将输出'Hello world'。

其它

IE8/9的兼容

IE8/9的storage事件与主流浏览器有所不同，主要有两个地方：

IE8/9的storage事件不携带key和newValue等属性
IE8/9的storage事件触发在localStorage的值真正改变之前

所以要支持IE8/9，必须在事件触发后，设置超时，并扫描检测所有localStorage中存储的key，手动检测其值是否发生改变。

转载于:https://www.cnblogs.com/kyrios/archive/2013/04/16/multipage-communication-channel.html