简单通过iframe+postMessage+localstorage实现跨域通信存储

这个方式我们可以实现我们在工作上出现的单点登录的问题，或者跨域传递信息的解决方案

假设我们当前所在的地址为http://localhost:8080当我们点击跳转的时候我们需要将我们当前域上的登录token携带到我们即将要跳转的http://localhost:8081上，一下就是我们的解决方案：

下面的这个是http://localhost:8080里面的代码

<script>
//首先我们需要创建一个iframe标签
cosnt bIframe = document.createElement('iframe')
bIframe.src='http://localhost:8081' // src需要指向我们要传递数据的目标地址
bIframe.style = "display:none" // 使该标签儿不在界面上进行显示
document.body.append(bIframe)  // 将标签插入到页面上
// 这个load事件是必须要加的不加，信息无法传递
bIframe.onload =()=>{
    bIframe.contentWindow.postMessage(
          JSON.stringify({ key: '这是神门东西' }),
          "http://localhost:8081"
    )
}

window.open('http://localhost:8081','_blank')  //打开我们想要的页面
</script>

下面的这个是http://localhost:8081里面的代码

//在我们需要使用通信的数据的页面中使用message事件进行监听

window.addEventListener('message',(e)=>{
//此时我们在e中获取origin,就是传递数据的地址，通过对比e.origin是否是从我们想要的地址传递过来的
    if(e.origin === 'http://localhost:8080'){
        //e.data 可以拿到我们从http://localhost:8080里面的数据,然后我们就可以将他存到localStorage中
    localStorage.setItem('token',e.data)
    }
}

 通过以上的代码我们就可以在我们新打开页面中的localStorage中查看到我们需要的token

在vue中也可以使用以上的方法进行实现