zoukankan      html  css  js  c++  java
  • 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相关的技术

  • 相关阅读:
    bzoj3576 [Hnoi2014]江南乐
    codeforces 438D The Child and Sequence
    bzoj1926 [Sdoi2010]粟粟的书架
    bzoj1185 [HNOI2007]最小矩形覆盖
    bzoj1069 [SCOI2007]最大土地面积
    bzoj4569 [Scoi2016]萌萌哒
    西西爆难积分
    概率问题-距离的期望
    各类平均与数列极限
    三角恒等式
  • 原文地址:https://www.cnblogs.com/WongHugh/p/7448669.html
Copyright © 2011-2022 走看看