利用HTML5 LocalStorage实现跨页面通信channel
2013-04-16 15:56
351 查看
引言
随着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库代码如下:
/** * Channel.js: Browser support for multipage communication * * @author Kyriosli */ var channel = function(entry) { var listeners = {}; if (/MSIE 8/.test(navigator.userAgent)) { window.attachEvent('storage', function() { // TODO: ie8 support }); } else { window.addEventListener('storage', function(e) { if (e.newValue !== null && /^channel\.(.+)/.test(e.key)) { broadcast(RegExp.$1, e.newValue); } }); } function broadcast(channelName, str) { if (channelName in listeners) { var value = JSON.parse(str); for ( var i = 0, arr = listeners[channelName], L = arr.length; i < L; i++) { try { arr[i](value); } catch (e) { console.error(e.stack); } } } } return { /** * 发布数据到其它页面 * * @param name * 命名空间名称 * @param value * 要发布的数据 * @returns this */ post : function(name, value) { entry["channel." + name] = JSON.stringify(value); setTimeout(function() { entry.removeItem("channel." + name); }, 0); return this; }, /** * 注册监听器 * * @param name * 要监听的命名空间 * @param callback * 回调函数 * @returns this */ on : function(name, callback) { if (name in listeners) { listeners[name].push(callback); } else { listeners[name] = [ callback ]; } return this; }, /** * 取消监听器 * * @param name * 要取消监听的命名空间 * @param callback * 回调函数,如果为空,则取消所有监听函数 * @returns this */ off : function(name, callback) { var arr = listeners[name]; if (arr) { if (!callback) { delete listeners[name]; } else { var i = arr.length; while (i--) { if (arr[i] === callback) { arr.splice(i, 1); } } } } return this; } }; }(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,手动检测其值是否发生改变。
相关文章推荐
- 利用HTML5 LocalStorage实现跨页面通信channel
- Html5利用AppCache和LocalStorage实现缓存h5页面数据
- 基于bootgrid,利用HTML5拖拽实现表格列互换并添加至localStorage
- Web前端开发,利用HTML5 Canvas实现监控系统页面展示
- 利用HTML5实现页面预加载
- HTML5 利用localStorage对页面访问量计数
- 利用HTML5的History API实现无刷新跳转页面初探
- html5学习--利用localstorage在静态页面间传递参数
- 利用html5的localStorage结合jquery实现日常费用查询器
- html5 利用canvas实现超级玛丽简单动画
- 用仿ActionScript的语法来编写html5——第二篇,利用Sprite来实现动画
- 微信开发之移动手机WEB页面(HTML5)Javascript实现一键拨号及短信发送功能
- 静态页中利用AJAX.NET实现无刷新页面
- 利用Swift之协议语法实现页面间的传值功能
- html5笔记之利用JSON.parse()和JSON.stringify()实现深拷贝
- html5 touch事件实现触屏页面上下滑动(一)
- 【JSP页面】利用数据库中的表格中的数据实现验证用户名和密码
- html5 touch事件实现触屏页面上下滑动(一)
- html5新特性:利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
- Asp.net利用Request属性实现自动返回上次请求页面