vue通过postMessage解决localStorage跨域

localStorage受同源策略影响，存在着跨域访问受限。

A项目地址：http://127.0.0.1:8080
B项目地址：http://127.0.0.2:4040

A项目(vue)

<template>
  <!-- 解决跨域通信 -->
  <iframe id="receivePage" src="http://127.0.0.2:4040/aaa" style="display: none"></iframe>
</template>
<script>
export default {
  name: 'aaa',
  data () {
    return { 
      },
    }
  },
  components: {},
  created: function () {

  },
  mounted: function () { 
       window.frames[0].postMessage("告诉B项目的内容"，"http://127.0.0.2:4040");
  }
} 
</script>

B项目（非vue）

<script> 
      window.addEventListener('message', function(e) {
                if (e.source != window.parent)
                    return;
                if(e.origin != "http://127.0.0.1:8080")
                    return; 
                console.log(e.data); //打印出传输过来的消息
            }, false);
  } 
</script>

B项目取到A项目的值之后，再通过localStorage.setItem方式去存储在自己域名下，即可成功解决localStorage跨域问题。