BEX5下增加sessionStorage监听器实现页面间数据刷新

场景：

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相关的技术

 

转载于:https://www.cnblogs.com/WongHugh/p/7448669.html