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. explain之key_len计算

    通常在优化SQL查询的时候,我们都会使用explain分析SQL执行计划,通常来说当用到组合索引的时候我们如何判断索引完全用上呢?当然高手看看表结构及SQL语句就知道到底用到了几个字段,对于不熟悉的同 ...

  2. Gradle全局变量定义及引用

    在Project的build.gradle脚本中定义一些全局变量 ext { compileSdkVersion = 21 buildToolsVersion = "24.0.1" ...

  3. wordvector to sentence vector

    wordvector已经通过word2vec训练出来了,可是如何通过WV得到SV(Sentence Vector)? 思路1: 直接将句子的向量叠加取平均:效果很不好,每个词没有考虑权重,获取的向量会 ...

  4. [LeetCode] 系统刷题6_Linked List

    1. Dummy Node 2. Basic skills [LeetCode] 206. Reverse Linked List_Easy tag: Linked List 2. Fast slow ...

  5. [Java in NetBeans] Lesson 07. JavaDoc and Unit Tests

    这个课程的参考视频和图片来自youtube. 主要学到的知识点有: 1. organize code into packages Create a package if want to make th ...

  6. [LeetCode] 603. Consecutive Available Seats_Easy tag: SQL

    Several friends at a cinema ticket office would like to reserve consecutive available seats.Can you ...

  7. Linux性能优化gprof使用

    gprof用于分析函数调用耗时,可用之抓出最耗时的函数,以便优化程序. gcc链接时也一定要加-pg参数,以使程序运行结束后生成gmon.out文件,供gprof分析. gprof默认不支持多线程程序 ...

  8. Express web框架 upload file

    哈哈,敢开源,还是要有两把刷子的啊 今天,看看node.js 的web框架 Express的实际应用 //demo1 upload file <html><head><t ...

  9. iOS - (集成支付宝第三方SDK大坑总结)

    其实集成支付宝相对于集成微信支付来说,支付宝算是简单的了,后续有空再去研究微信支付,现目前先总结一下集成支付宝所遇到的坑,其实支付宝的坑也不算太多,细算下来大概5-6个左右,但是其报错方式有点恶心,不 ...

  10. yield和send函数

    yield作用类似于return,其本质是一个迭代器. 当程序执行到yield时,会结束本次循环,返回一个值,然后内置含有next()函数, 下次在执行时,会从yield结束的地方继续执行. 带yie ...