localStorage变更事件当前页响应新解-awen
2013-07-17 16:59
134 查看
html5的localStorage相信大家都是很熟悉了,但是在chrome等支持该对象的浏览器中(ie10除外),如果你监听storage变更事件你就会发现,当数据发生变化时本页是监听不到storage事件变更消息的。而同域的其他打开的页面反而监听到了该消息。悲剧不?
以上的机制应该是无可厚非的,但是对于单页app或者数据驱动的页面展现来说,这是一个让人抓狂的规事情。awen在开发中为了实现一个纯数据驱动的单页app机制。不得不面对这个问题,经过测试终于实现了本页面locaStorage变更监听。
基本原理如下:
1 重新生成一个对象,包装localStorage原生方法:
2 在能引起storage变更时间的操作接口中,手动触发StorageEvent事件
比如removeItem的实现中,你就需要初始化并触发StorageEvent事件:
3 通过自封装的Storage对象操作,并在当前页监听:
到此为止。StorageEvent的当前页面监听问题就解决了,爽不?
以上的机制应该是无可厚非的,但是对于单页app或者数据驱动的页面展现来说,这是一个让人抓狂的规事情。awen在开发中为了实现一个纯数据驱动的单页app机制。不得不面对这个问题,经过测试终于实现了本页面locaStorage变更监听。
基本原理如下:
1 重新生成一个对象,包装localStorage原生方法:
var Storage = { setItem : function(k,v){ localStorage.setItem(k,v); ...... }, removeItem : function(k){ localStorage.removeItem(k); ....... }, getItem : ... }
2 在能引起storage变更时间的操作接口中,手动触发StorageEvent事件
比如removeItem的实现中,你就需要初始化并触发StorageEvent事件:
var se = document.createEvent("StorageEvent"); se.initStorageEvent('storage', false, false, key, oldval, newval, url, storage); window.dispatchEvent(se);
3 通过自封装的Storage对象操作,并在当前页监听:
window.addEventListener("storage",function(e){ console.log(e); },false); Storage.addItem('test','小朋友爱吃糖');
到此为止。StorageEvent的当前页面监听问题就解决了,爽不?
相关文章推荐
- localStorage变更事件当前页响应新解
- localStorage变更事件当前页响应新解
- DirectShow响应事件
- MFC 对话框程序的键盘事件响应方法及与按钮事件的整合
- python 事件 响应 钩子 event hooks
- 绑定与撤销回车响应按钮单击事件
- xib 不响应按钮单击事件问题
- JS回传响应按钮事件
- UITableViewCell点击事件无法响应问题
- EditText,TextView部分文字点击事件响应
- UIimageview添加手势,无法响应手势事件
- 用C++在cocos2d-x 3.2下完美解决Menu吞掉事件导致ScrollView等无法响应的问题
- MapX 控件 鼠标事件响应
- UILabel的使用、事件响应及传值
- 3. android响应事件的四种方法(以onclick为例子)
- android学习笔记之基本事件的响应
- Android RadioButton连续响应选中事件
- ASP.NET 2.0 使服务器控件不响应服务器端事件
- 让窗口响应鼠标双击事件
- PopupWindow的显示位置及简单的响应事件