JavaScript-LocalStorage跨域方式和不同页面之间通讯方式

分手后的思念是犯贱 2023-10-02 17:39 37阅读 0赞

我们以LocalStorage的交互方式进行演示,下代码主要不是给你们看的是给我自己看的留作一个记录,方便日后回顾, 解决方案是`iframe +postMessage 方式进行跨域通讯`可以自行百度搜索

### 消息发送器 ###

**PostMessage.js**

//注意事项   ,如果DOM的(iframe)没有加载出来那么下面所有的方法都将失效
    //解决办法:       window.onload = function () {  //DOM加载完毕后在执行
    //                  addPostMessage("hu1","123")
    //               }
    
    
    function getIframe() {
        
        return  document.getElementById('child').contentWindow;
    }
    
    
    export function creteNodeIframe(ip) {
        
        var body = document.body;
        var input = document.createElement("iframe");
        input.setAttribute("id","child")
        input.setAttribute("src",ip) //"http://c.c.com:10002"
        input.style.display="none"
        body.appendChild(input);
        return  input;
    }
    //获取LocalStorageMain 权限存储页面的认证,持续获取值
    export function getPostMessage(itemKey) {
          //获取指定
        getIframe().postMessage(JSON.stringify({
        type: "get", key: itemKey}), "*");
    }
    
    //休眠
    export function sleep(n) {
        
        var start = new Date().getTime();
        while (true) {
        
            if (new Date().getTime() - start > n) {
        
                break;
            }
        }
    }
    
    
    
    
    export function addPostMessage(itemKey, itemValue) {
        
        getIframe().postMessage(JSON.stringify({
        type: "set", key: itemKey, value:itemValue }), '*');
    }
    
    
    export function removePostMessage(itemKey) {
        
        getIframe().postMessage(JSON.stringify({
        type: "remove", key: itemKey}), '*');
    }
    export function clearPostMessage() {
        
        getIframe().postMessage(JSON.stringify({
        type: "clear"}), '*');
    }
    
    // 监听getPostMessage返回值
    ;(function (win) {
        
        win.addEventListener('message', function (e) {
        
    
            //为了安全需要验证数据来源是那个地址
            if (e.origin && e.origin === "http://c.c.com:10002") {
        
                //设置接收到的数据到localStorage里
                if (e.data) {
        
                    var options = JSON.parse(e.data);
                    if (options.type === "get") {
        
                        if (options.data) {
        
                            localStorage.setItem(options.key, options.data);
                        }
    
                    }
                }
    
            }
        }, false);
    
    })(window);

### 监听器处理器 ###

**processor.js**

;(function (win) {
        
    
        win.addEventListener("message", function (evt) {
        
            if (win.parent !== evt.source) {
        
                return
            }
            try {
        
                if (evt.data) {
        
                    var options = JSON.parse(evt.data);
                    // console.log("addEventListener--:",options)
                    if (options.type === "get") {
        
                        // console.log("get")
                        let  message= win.localStorage.getItem(options.key)
                        if (message) {
        
                            let json = JSON.stringify({
        
                                type: options.type,
                                key: options.key,
                                data:  message
                            });
                            win.parent.postMessage(json, "*");
                        }
                    }
                    if (options.type === "set") {
        
                        // console.log("set")
                        if (options.value&&options.value!=="null") {
        
                            win.localStorage.setItem(options.key, options.value);
                        }
                    }
                    if (options.type === "remove") {
        
                        // console.log("remove")
                        win.localStorage.removeItem(options.key);
    
    
                    }
                    if (options.type === "clear") {
        
                        // console.log("clear")
                        win.localStorage.clear();
                    }
    
                    if (options.type === "refresh") {
        
                       let refresh=win.localStorage.getItem(options.key)
                        if (refresh) {
        
                            let json = JSON.stringify({
        
                                type: options.type,
                                key: options.key,
                                data: refresh
                            });
    
                            win.parent.postMessage(json, "*");
                        } else {
        
                            let json = JSON.stringify({
        
                                type: "remove" ,
                            });
                            win.parent.postMessage(json, "*");
                        }
    
                    }
    
                }
            } catch (e) {
        
            }
        }, false);
    
    
    
    })(window);

### 监听处理器的处理状态器 ###

**communicate.js**

// -----------------页面通讯--------------------------------
    
    //创建iframe框
    var body = document.body;
    var input = document.createElement("iframe");
    input.setAttribute("id","child")
    //发送消息的地址,这个地址下必须有监听
    
    input.setAttribute("src","http://c.c.com:10002")
    input.style.display="none"
    body.appendChild(input);
    
    setInterval(function () {
        
        // console.log("setInterval-refresh")
        let child= document.getElementById('child').contentWindow;
        child.postMessage(JSON.stringify({
        type: "refresh", key: "jwtToken"}), "*");
        child.postMessage(JSON.stringify({
        type: "refresh", key: "userInfo"}), "*");
    },100);
    // 监听getPostMessage返回值
    ;(function (win) {
        
        let off= window.sessionStorage.getItem("off")
        if (!off) {
        
            window.sessionStorage.setItem("off","true");
        }
        win.addEventListener('message', function (e) {
        
            //为了安全需要验证数据来源是那个地址
            if (e.origin && e.origin === "http://c.c.com:10002") {
        
                //设置接收到的数据到localStorage里
                if (e.data) {
        
                    var options = JSON.parse(e.data);
                    if (options.type==="refresh") {
        
                        let original= window.localStorage.getItem(options.key)
                        if (options.data!==original) {
        
                            window.sessionStorage.setItem("off","false")
                            localStorage.setItem(options.key, options.data);
                            location.reload();
                        } else {
        
                            window.sessionStorage.setItem("off", "true");
                        }
                    }
                    if (options.type==="remove") {
        
                        let off= window.sessionStorage.getItem("off")
                        if (off==="true") {
        
                            window.sessionStorage.setItem("off","false")
                            //可以自行指定,是刷新页面还是跳转到指定页面
                            location.reload();
                        }
    
                    }
                }
            }
        }, false);
    
    })(window);

### 使用方式 ###

1.  `消息发送器`给`监听处理`发送消息
2.  监听处理器,接收到消息然后进行处理
3.  或者监听处理器处理完后反馈消息给来源处理情况
4.  监听处理器的处理器,是用于实时监听`监听处理器`处理状态,用于特殊的处理