场景:
A页面修改了数据,希望B页面能进行及时的同步前端数据,但是假如当A页面修改保存后,去获得B页面的model对象,会增加开发的难度,同时A页面也不能重复利用;假如在B页面的激活事件里面写刷新代码,因为并不是每次激活都需要刷新,会造成资源浪费,而且当B页面内嵌到某页面时激活事件会失效,所以引用sessionStorage监听器来进行监听,通过修改sessionStorage的值来让监听器执行事件。
1 在需要进行刷新数据的页面的加载事件中增加监听器代码
this.addStorageListener();
监听器代码的具体实现
// 增加storage监听 Model.prototype.addStorageListener = function(){ var me = this; var orignalSetItem = sessionStorage.setItem; // 改写localStorage 可以让同页面也能进行触发 sessionStorage.setItem = function(key,newValue){ var setItemEvent = new Event("setItemEvent"); setItemEvent.newValue = newValue; setItemEvent.key = key; window.dispatchEvent(setItemEvent); orignalSetItem.apply(this,arguments); }; window.addEventListener("setItemEvent", function (e) { if(e.key=="IndexRefresh"&&e.newValue){ // 不是所有的key都需要触发 // 执行代码 …… // 执行完删除掉刷新的值 sessionStorage.removeItem("IndexRefresh"); } }); };
2 在需要提醒的页面写通知代码
sessionStorage.setItem("IndexRefresh", "D_B,X_X");
备注:以上方法只能进行当前用户的前端数据的统一,假如需要能跟后端数据进行实时的刷新,可以查询websocket相关的技术