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. 004-RestTemplate 使用常见问题

    一.使用 同前三节:ClientGetGoodsByGoodsIdResponse response = restTemplate.postForObject(svcUrl, request, Res ...

  2. Redis入门到高可用（十二）—— pipeline

    一.回忆通信模型 二.流水线 1.什么是流水线 2.pipeline-Jedis实现 3.与原生M(mget,mset等)操作对比 M操作是原子操作 pipeline命令是非原子的,Redis服务器会 ...

  3. typedef 详解

    一行很常用的代码: typedef int XX_Size_Check[(sizeof(XX)==64)? 1:-1]; 很容易猜到上面这行代码是要在编译时检查XX的size,但再深究点,我们就会发现 ...

  4. HTTP协议和WEB框架

    一.HTTP协议 <<HTTP权威指南>>读书笔记:https://www.cnblogs.com/qcssmd/p/5508150.html 一.HTTP简介 HTTP协议是 ...

  5. Day1 Python基础学习——概述、基本数据类型、流程控制

    一.Python基础学习 一.编程语言分类 1.简介 机器语言:站在计算机的角度,说计算机能听懂的语言,那就是直接用二进制编程,直接操作硬件 汇编语言:站在计算机的角度,简写的英文标识符取代二进制去编 ...

  6. Mongodb 基础 复制集原理和搭建

    数据复制原理 开启复制集后,主节点会在local库下生成一个集合叫 oplog.rs,这是一个有限的集合,即大小固定.这个集合记入了整个mongod实例一段时间内数据库的所有变更操作(如:增/删/改) ...

  7. Python Singleton模式

    注意:在重写__new__方法时,object.__new__(cls)不能传参数 #!/usr/bin/env python # -*- coding: utf-8 -*- class Single ...

  8. Ajax 传包含集合的JSON

    通过ajax给后台传json对象,当json中含对象集合时,如 $.ajax({ url : , type : "POST", dataType : "json" ...

  9. 安装ElasticSearch5.5.2 注意事项

    官方文档中建议生产环境中打开 bootstrap.memory_lock: true 打开之后会报很多错误要优化一下系统参数 vim /etc/security/limits.conf * soft ...

  10. js中两个!!的理解

    在js中经常有两个!!出现,经常让人难以理解 (function () { var a = 10; var b = 20; function add(num1, num2) { var num1 = ...