localstorage也存在 跨域的问题，

【解决思路如下】

在A域和B域下引入C域，所有的读写都由C域来完成，本地数据存在C域下;

因此 A哉和B域的页面必定要引入C域的页面; 当然C域最好是主域，原因后面会提到(在localstorage 不方便的情况下使用cookie);

【A域】【B域】需要读写时，通过postMessage 向【C域】发送跨哉消息，

【C域】监听跨域消息，在接到批定的消息时进行读写操作，

【C域】接到跨域消息时，如果是写入删除可以不做什么，如果是读取，就要先读取本域本地数据通过postMessage向父页面发送消息,

【A 域 / B 域】在读取【C域】数据时就需要监听来自【C域】的跨域消息

【注意事项】

window.postMessage()方法，向【C域】发消息，应用iframe.contentWindow.postMessage() 这样iframe内的【C 域】才可以接到，

同理，【C域】向 【A 域B域】发消息时应用，window.parent.postMessage()

【A域、B域】的逻辑一定要在iframe 加载完成后进行

【C域】的页面如下：

根据域名请自行修改

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="robots" content="noindex">

    <title>cross domain</title>

</head>

<body>

<script>

    ;(function(doc,win,undefined){

        var fn=function(){};

        fn.prototype={

            /*本地数据存储*/

            setLocalCookie: function (k, v, t,domain) {

                typeof window.localStorage !== "undefined" ? localStorage.setItem(k, v) :

                        (function () {

                            t = t || 365 * 12 * 60 * 60;

                            domain=domain?domain:".hc360.com";

                            document.cookie = k + "=" + v + ";max-age=" + t+";domain="+domain+";path=/";

                        })()

            },

            getLocalCookie: function (k) {

                k = k || "localDataTemp";

                return typeof window.localStorage !== "undefined" ? localStorage.getItem(k) :

                        (function () {

                            var all = document.cookie.split(";");

                            var cookieData = {};

                            for (var i = 0, l = all.length; i < l; i++) {

                                var p = all[i].indexOf("=");

                                var dataName = all[i].substring(0, p).replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"");

                                cookieData[dataName] = all[i].substring(p + 1);

                            }

                            return cookieData[k]

                        })();

            },

            clearLocalData: function (k) {

                k = k || "localDataTemp";

                typeof window.localStorage !== "undefined" ? localStorage.removeItem(k) :

                        (function () {

                            document.cookie = k + "=temp" + ";max-age=0";

                        })()

            },

            init:function(){

                this.bindEvent();

            },

            bindEvent:function(){

                var _this=this;

                win.addEventListener("message",function(evt){

                    if(win.parent!=evt.source){return}

                    var options=JSON.parse(evt.data);

                    if(options.type=="GET"){

                        var data=tools.getLocalCookie(options.key);

                        win.parent.postMessage(data, "*");

                    }

                    options.type=="SET"&&_this.setLocalCookie(options.key,options.value);

                    options.type=="REM"&&_this.clearLocalData(options.key);

                },false)

            }

        };

        var tools=new fn();

        tools.init();

    })(document,window);

</script>

</body>

</html>

【A域、B域 读取操作】

【写】

iframe.contentWindow.postMessage(JSON.stringify({type:"SET",key:"key",value:"value"}),'http://www.C.com');

【读】

iframe.contentWindow.postMessage(JSON.stringify({type:"GET",key:"key"}),'http://www.C.com');

【删】

iframe.contentWindow.postMessage(JSON.stringify({type:"REM",key:"key"}),'http://www.C.com');

---------------------
原文：https://blog.csdn.net/sflf36995800/article/details/53290457

localstorage跨域解决方案的更多相关文章

  1. localStorage和cookie的跨域解决方案

    原文转自:点我 前言 localStorage和cookie大家都用过,我前面也有文章介绍过,跨域大家也都了解,我前面也有文章详细描述过.但是localStorage和cookie的跨域问题,好多小伙 ...

  2. Ajax跨域解决方案大全

    题纲 关于跨域,有N种类型,本文只专注于ajax请求跨域(,ajax跨域只是属于浏览器"同源策略"中的一部分,其它的还有Cookie跨域iframe跨域,LocalStorage跨 ...

  3. 跨域解决方案一：使用CORS实现跨域

    跨站HTTP请求(Cross-site HTTP request)是指发起请求的资源所在域不同于请求指向的资源所在域的HTTP请求. 比如说,我在Web网站A(www.a.com)中通过<img ...

  4. asp.net web api2.0 ajax跨域解决方案

    asp.net web api2.0 ajax跨域解决方案 Web Api的优缺点就不说了,直接说怎么跨域,我搜了一下,主要是有两种.  一,ASP.NET Web API支持JSONP,分两种 1, ...

  5. iframe跨域解决方案

    公司某个功能用的是iframe,由于跨域的原因,我们不能直接设置父级页面iframe的高度,所以用了一个中间页home来完成父级页面iframe的高度设置,这种中间页其实很多时候不好用,因为涉及到页面 ...

  6. JSON跨域解决方案收集

    最近面试问的挺多的一个问题,就是JavaScript的跨域问题.在这里,对跨域的一些方法做个总结.由于浏览器的同源策略,不同域名.不同端口.不同协议都会构成跨域:但在实际的业务中,很多场景需要进行跨域 ...

  7. Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持

    Atitit.js跨域解决方案attilax大总结 后台java php c#.net的CORS支持 1. 设置 document.domain为一致  推荐1 2. Apache 反向代理 推荐1 ...

  8. js最全的十种跨域解决方案

    在客户端编程语言中,如javascript和ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义.同 源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问 ...

  9. 跨域解决方案之JSONP，通过借助调用百度搜索的API了解跨域案例

    跨域解决方案之JSONP 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web ...

随机推荐

  1. c#NamedPipe命名管道通信例子

    服务端 private NamedPipeServerStream pipeServer; private Thread receiveDataThread = null; public fServe ...

  2. C++中关于new和delete的使用

    1.创建动态数组 数组类型的变量有三个重要的限制:数组长度固定不变,在编译时必须知道它的长度,数组只在定义它的块语句中存在.对于动态分配的数组,虽然长度是固定的,但是动态分配的数组不必在编译时知道其长 ...

  3. 万恶之源 - Python装饰器及内置函数

    装饰器 听名字应该知道这是一个装饰的东西,我们今天就来讲解一下装饰器,有的铁子们应该听说,有的没有听说过.没有关系我告诉你们这是一个很神奇的东西 这个有多神奇呢? 我们先来复习一下闭包 def fun ...

  4. dubbo发布和引用服务

    1.首先添加相关的jar包到工程中 2.在spring(mvc)的配置文件中添加约束 xmlns:dubbo=http://code.alibabatech.com/schema/dubbo http ...

  5. DL中train\dev\test集

    转自:https://blog.csdn.net/l8947943/article/details/80328721 training set:训练集是用来训练模型的.遵循训练集大,开发,测试集小的特 ...

  6. 【LeetCode每天一题】Palindrome Number( 回文数字)

    Determine whether an integer is a palindrome. An integer is a palindrome when it reads the same back ...

  7. maven设置每次构建获取最新版本号

    build.gradle中的依赖是通过设置maven依赖实现.我们知道,maven可以说是通过一个坐标定位来确定唯一一个包的,所说的坐标定位分别是groupId,artifactId和version三 ...

  8. 定位crash的问题

    一般都要符号化crash日志,但是低内存奔溃却没有堆栈日志 A Low Memory report differs from other crash reports in that there are ...

  9. mac 进程和线程工具

    进程 查看端口进程 lsof lsof -i tcp:<port> 示例 $ lsof -i tcp:8082 COMMAND PID USER FD TYPE DEVICE SIZE/O ...

  10. 用int还是用Integer？

    昨天例行code review时大家有讨论到int和Integer的比较和使用. 这里做个整理,发表一下个人的看法.   [int和Integer的区别] int是java提供的8种原始类型之一,ja ...