多页面通信之监听storage

    多个页面通信有很多方法，其中之一便是使用storage。

    storage只能够监听同源非同一页面中的storage变化，如果想监听同一个页面的storage变化，我们需要改写原生方法（应用了装饰者模式），抛出自定义事件来监听storage的变化。

     1.监听同源页面storage变化：

    ps:如何产生同源页面，可以在一个文件夹下定义两个html，由一个html通过href跳转到另一个html即可。

    window.addEventListener('storage',function(e){
            console.log(`键:${e.key},旧值${e.oldValue},新值：${e.newValue})`);
        });

    2.监听同一个页面中storage的变化：

    var originalSetItem=localStorage.setItem;//保存元素setItem方法
        localStorage.setItem=function(key,value){  //改写
            let setItemEvent=new Event('setItemEvent'); //自定义事件
            setItemEvent.key=key;  
            setItemEvent.value=value;
            window.dispatchEvent(setItemEvent); //派发事件
            originalSetItem.apply(this,arguments); //执行原生方法
        }
  

        window.addEventListener('setItemEvent',function(e){
            let oldValue=localStorage.getItem(e.key);
            let result={
                oldValue:null,
                newValue:e.value,
                key:e.key
            }
            if(oldValue===e.value){ //通过判断新设置的值和原有的值是否相同确定旧值
               result.oldValue=oldValue;
            }
            console.log({result})
        })

        var originalRemoveItem=localStorage.removeItem; //同理改写原生删除方法
        localStorage.removeItem=function(key){
            let removeItemEvent=new Event('removeItemEvent');
            removeItemEvent.key=key;
            removeItemEvent.oldValue=localStorage.getItem('key');
            window.dispatchEvent(removeItemEvent);
            return originalremoveItem(key);
        }
        window.addEventListener('removeItemEvent',function(e){
            let result={
                oldValue:e.oldValue,
                key:e.key
            }
            console.log(key)
        })

        localStorage.setItem('newValue',111);//测试用例