localstorage跨域存储读取数据

来源：互联网发布：网络客服沟通技巧编辑：程序博客网时间：2024/06/11 13:01

postMessage(data,origin)方法允许来自不同源的脚本采用异步方式进行通信，可以实现跨文本档、多窗口、跨域消息传递。接受两个参数：

①　data：要传递的数据，HTML5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象，然而并不是所有浏览器支持任意类型的参数，部分浏览器只能处理字符串参数，所以在传递参数时需要使用JSON.stringify()方法对对象参数序列化。

②　origin：字符串参数，指明目标窗口的源，协议+主机+端口号[+URL]，URL会被忽略，所以可以不写，只是为了安全考虑，postMessage()方法只会将message传递给指定窗口，当然也可以将参数设置为"*"，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为"/"。

eg：postMessage和iframe解决普通的跨域问题。

http://javascript.exam.com/text.html：

[html] view plain copy
 
<!DOCTYPE html>    
<html>    
    <head>    
        <title></title>    
    </head>    
    <body>    
        <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">    
            <div id="color">Frame Color</div>    
            </div>    
        <div>    
        <iframe id="child" src="http://jquery.exam.com/text.html"></iframe>    
        </div>    
        <script type="text/javascript">    
            window.onload = function() {    
                // 在页面加载完成后主页面向iframe发送getColor请求（参数没实际用处）  
                window.frames[0].postMessage('getcolor', 'http://jquery.exam.com');    
            }    
            // 主页面监听message事件,初始化自身颜色  
            // 主页面监听message事件,处理自身变色  
            window.addEventListener('message', function(e) {    
                var color = e.data;    
                document.getElementById('color').style.backgroundColor = color;    
            }, false);    
        </script>    
    </body>    
</html>  

http://jQuery.exam.com/text.html：

[html] view plain copy
 
<!doctype html>  
<html>  
    <head>  
        <style type="text/css">  
            html,body{  
                height:100%;  
                margin:0px;  
            }  
        </style>  
    </head>  
    <body style="height:100%;">  
        <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">  
            click to change color  
        </div>  
        <script type="text/javascript">  
            var container = document.getElementById('container');  
            // iframe接收消息，并把当前颜色发送给主页面  
            window.addEventListener('message', function(e) {  
                if (e.source != window.parent)   
                    return;  
                var color = container.style.backgroundColor;  
                window.parent.postMessage(color, '*');  
            }, false);  
            // 点击iframe时触发changeColor方法，把变化后的颜色发送给主页面  
            function changeColor() {       
                var color = container.style.backgroundColor;  
                if (color == 'rgb(204, 102, 0)')  
                    color = 'rgb(204, 204, 0)';  
                else  
                    color = 'rgb(204,102,0)';  
                container.style.backgroundColor = color;  
                window.parent.postMessage(color, '*');  
            }  
        </script>  
    </body>  
</html>  

假设有http://javascript.exam.com/text.html和http://jquery.exam.com/text.html两个页面。

通过http://javascript.exam.com/text.html页面去修改http://jquery.exam.com/text.html页面的本地数据：

①　在http://javascript.exam.com/text.html页面创建一个iframe，嵌入http://jquery.exam.com/text.html页面。

②　http://javascript.exam.com/text.html页面通过postMessage传递指定格式的消息给http://jquery.exam.com/text.html页面。

③　http://jquery.exam.com/text.html页面解析http://javascript.exam.com/text.html页面传递过来的消息内容，调用localStorage API 操作本地数据。

④　http://jquery.exam.com/text.html页面包装localStorage的操作结果，并通过postMessage传递给http://javascript.exam.com/text.html页面。

⑤　http://javascript.exam.com/text.html页面解析http://jquery.exam.com/text.html页面传递回来的消息内容，得到 localStorage 的操作结果。

在例子中页面加载的时候主页面向iframe发送’getColor‘ 请求（参数没实际用处）

window.onload=function(){            window.frames[0].postMessage('getcolor','http://jquery.exam.com');        }

iframe接收消息，并把当前颜色发送给主页面呢

window.addEventListener('message',function(e){                if(e.source!=window.parent) return;                var color=container.style.backgroundColor;                window.parent.postMessage(color,'*');            },false);

我们利用这时候的MessageEvent对象判断了一下消息源,MessageEvent是一个这样的东东

有几个重要属性

data：顾名思义，是传递来的message
source：发送消息的窗口对象
origin：发送消息窗口的源（协议+主机+端口号）

这样就可以接收跨域的消息了，我们还可以发送消息回去，方法类似

主页面接收消息，更改自己div颜色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

当点击iframe事触发其变色方法，把最新颜色发送给主页面

function changeColor () {                            var color=container.style.backgroundColor;                if(color=='rgb(204, 102, 0)'){                    color='rgb(204, 204, 0)';                }else{                    color='rgb(204,102,0)';                }                container.style.backgroundColor=color;                window.parent.postMessage(color,'*');            }

主页面还是利用刚才监听message事件的程序处理自身变色

window.addEventListener('message',function(e){            var color=e.data;            document.getElementById('color').style.backgroundColor=color;        },false);

更多跨域实例：http://blog.csdn.net/sflf36995800/article/details/53290457

阅读全文

0 0