localStorage不能跨域，所以在A域名下用localStorage.YourKey方式存储的值，在B域名下是不能取到的。

所以需要转变思路，目前主要使用的两种方式：

一种方式：在A、B两个页面使用document.domain设置为相同的域名，但两个页面需要遵循同源策略，即协议，端口（如果有指定）和域名都相同；在根域范围内，允许把domain属性的值设置为它的上一级域。

另一种方式是推荐方式：在A域下，用postMessage方法把需要保存的数据传递过去，再在B域下接收并保存。postMessage可以安全地实现跨源通信。

postMessage方式实现步骤如下：

一、发送端sendpage.html（在 a.domain.com域名下）：

1、sendpage.html中，添加一个iframe，src属性指定接收页面的url：

<iframe id="receivePage" src="http://b.domain.com/receive.html"></iframe>

2、sendpage.html中，在js中添加postMessage方法：

document.getElementById("receivePage").contentWindow.postMessage("要传递的数据","*");

二、接收端receive.html（在b.domain.com域名下）：

<!doctype html>

<html>

<head>

</head>

<body style="height:100%;">

    <script type="text/javascript">

            window.addEventListener('message', function(e) {

                if (e.source != window.parent)

                    return;

                if(e.origin != "http://a.domain.com")//请求源验证

                    return;

                localStorage.YourKey = e.data;

            }, false);

    </script>

</body>

</html>

postMessage参考

H5中用postMessage传递数据，解决localStorage不能跨域问题的更多相关文章

  1. 使用HTML5中postMessage实现Ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  2. 使用HTML5中postMessage 实现ajax中的POST跨域问题

    HTML5中提供了在网页文档之间相互接收与发送信息的功能.使用这个功能,只要获取到网页所在窗口对象的实例,不仅仅同源(域+端口号)的web网页之间可以互相通信,甚至可以实现跨域通信. 浏览器支持程度: ...

  3. Nginx配置解决NetCore的跨域

    使用Nginx配置解决NetCore的跨域 废话不多说,直接上Nginx配置 server { listen 80; server_name 你的Id或域名; location / { add_hea ...

  4. C#彻底解决Web Browser 跨域读取Iframes内容

    C#彻底解决Web Browser 跨域读取Iframes内容 用C# winform的控件web browser 读取网页内容,分析一下数据,做一些采集工作. 如果是同一个域名下面还是好办的,基本上 ...

  5. 170222、使用Spring Session和Redis解决分布式Session跨域共享问题

    使用Spring Session和Redis解决分布式Session跨域共享问题 原创 2017-02-27 徐刘根 Java后端技术 前言 对于分布式使用Nginx+Tomcat实现负载均衡,最常用 ...

  6. Vue Nginx反向代理配置 解决生产环境跨域

    Vue本地代理举例: module.exports = { publicPath: './', devServer: { proxy: { '/api': { target: 'https://mov ...

  7. 解决ajax请求跨域

    跨域大部分需要通过后台解决,引起跨域的原因: 3个问题同时满足 才可能产生跨域问题,即跨域(协议,主机名,端口号中有一个不同就产生跨域) 下面是解决方法 方法一 // ajax请求跨域 /* *解决a ...

  8. 转：解决tomcat服务器跨域问题

    原文地址: 解决tomcat服务器跨域请求问题 注:还未测试 在tomcat 的web.xml 配置文件中加入如下配置过滤器 (如web.xml中有多个filter时要把下面配置放在最前端) < ...

  9. 使用Spring Session和Redis解决分布式Session跨域共享问题

    http://blog.csdn.net/xlgen157387/article/details/57406162 使用Spring Session和Redis解决分布式Session跨域共享问题

随机推荐

  1. recyclerview 主活动里监听点击事件

    记性真的不行啊...贴上来有时间多复习复习 主活动 package com.example.com.webtext; import android.content.Intent; import and ...

  2. CentOS 7中关闭删除virbr0虚拟网卡

    [问题] 虚拟机IP:192.168.31.101 本地物理机IP:192.168.31.254 虚拟机安装在本地物理机上 发现问题:本地物理机ping得通虚拟机IP,但是虚拟机无法ping通物理机I ...

  3. 在本地运行正常的静态网页放到tomcat中却显示异常的原因

    在本地写好了一个个人网站,本地直接用浏览器运行,很顺利,然而把网站放到Tomcat里面,却发现图片显示不出来,这就奇怪了. 后来发现,我的网站的Image文件夹用了大写“I”,而网页里面的路径用了小写 ...

  4. eclipse光标变粗解决方法

    如上图,光标变成黑块好像没那么顺眼,原因是我们不小心按到了insert键造成的,再按一下insert键就OK了,如果delete和insert是一个键那么就用FN键+delete/insert键就可以 ...

  5. StringUtils.defaultIfBlank

    StringUtils.defaultIfBlank在字符串为null,空串或者空白串的时候,返回指定的默认值. org.apache.commons.lang.StringUtils default ...

  6. 修改 input中的placeholder的字体样式和颜色

    placeholder属性是css3中新增加的属性, 由于是新加入的属性因此对各大浏览器都不兼容: 因此在使用的时候要加兼容性 火狐:-moz-placeholder { /* Mozilla Fir ...

  7. python字典和条件控制

    元组tuple 元组其实跟列表差不多,也是存一组数,只不是它一旦创建,便不能再修改,所以又叫只读列表 注意单个tuple元素的时候,元素后面要加",",否则python解析器不会识 ...

  8. js查漏补缺

    js中: 1.对空(Null).未定义(Undefined).Symbol .函数(Function) 都是数据类型(js不像java中,声明了变量会有默认值,在js中只声明变量而没有赋值的时候,类型 ...

  9. .net core webapi 使用ValidationAttribute对比同一对象的多个参数

    众所周知,在使用DataAnnotations数据验证的时候,特别是针对同一个InputDto的多个属性进行对比的时候,例如起始日期不能大于结束日期,我们需要在Attribute中知道当前InputD ...

  10. JS获取伪元素的属性

    window下的getComputedStyle属性.getPropertyValue属性 // 获取 .element:before 的 color 值 var color = window.get ...