postMessage+localstorage实现跨域数据共享

    这两天公司项目上需要实现个系统多法人选择登陆功能，纯前端解决方案，本想着很简单，无非就是做个法人选择界面，然后配置下法人系统地址下拉框，选择相应的法人跳转到指定的登陆页面即可，然后leader说要保证浏览器地址栏域名地址不可以改变，要让用户感觉这是一个系统，OK，那就用iframe呗。

    嘿嘿，可是问题没有想象的那么简单，在业务系统（子页面）中很多地方用到了选择法人系统（父页面）中的一些信息，在选择法人系统（父页面）中同时也需要用到业务系统（子页面）中的一些信息，那么一般情况下的处理方式是存储cookie或者localstorage，然而cookie和localstorage都没办法做到跨主域共享数据，这就有点棘手了，研究了很久，终于找到了解决方案，那就是使用H5的postMessage API在父子页面间进行消息传递，再分别在父子系统中单独进行需要共享数据的存储，这里需要注意的是，在接收到消息时只能使用localstorage来存储，不能使用cookie，因为使用cookie来存储的话，实际上还是将数据存在了消息传递方的域下，而不是消息接收方的域下。

    再弄清楚了逻辑后，下面进行具体postMessage+localstorage实现跨域数据共享的代码讲解

    父页面：

        window.onmessage = function (e) { //接收子页面传递来的数据
            e = e || window.event;
            store.set("testData",e.data); //将接收到的消息存入localstorage，e.data为数据内容，字符串格式
        };

        var onLoad = function () { //向子页面传递消息
            var win = document.getElementById('postMessage').contentWindow;
            win.postMessage(JSON.stringify({a:1,b:2}),'*');
        };

        var iframe = $("<iframe frameborder='0' width='100%' height='100%' id='postMessage'></iframe>"); //动态创建iframe
        iframe.attr("src","http://www.xxx.com/index.html");
        $("body").html(iframe);

        setTimeout(function () { //延迟1s，为了确保iframe已经被加载完成，由于是动态创建的iframe，无法使用onload监听
           onLoad();
        },1000);

    子页面

        window.onmessage = function (e) { //接收父页面传递来的数据
            e = e || window.event;
            store.set("testData",e.data); //将接收到的消息存入localstorage，e.data为数据内容，字符串格式
        };

        parent.postMessage(JSON.stringify({c:3,b:4}), '*'); //向父页面传递消息

    以上代码仅为具体父子页面传递消息的核心代码，并无具体业务逻辑，根据注释很容易明白，这里需要注意的一点是，上面说到了只能使用localstorage，并且这个localstorage的生命周期和以往理解的不一样，它在这里的生命周期仅存在于父子页面共同存在期间，一旦关闭浏览器即销毁，并不是永久存储。

转载于:https://my.oschina.net/u/3492622/blog/1842148