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. mysql 5.7.12 新增 X plugin x 协议 详解

    mysql 5.7.12 新增 X plugin  x 协议 详解http://xiaozhong991.blog.51cto.com/2354914/1763792 x 协议  操作nosql数据库 ...

  2. mysql mpm

    mysql mpm 参考文章 http://www.myexception.cn/mysql/1968274.html http://www.linuxidc.com/Linux/2013-07/86 ...

  3. python类型错误：can only concatenate list (not "str") to list

    TypeError:can only concatenate list (not "str") to list: 类型错误:只能将list类型和list类型联系起来,而不是str类 ...

  4. 【分类器】感知机+线性回归+逻辑斯蒂回归+softmax回归

    一.感知机     详细参考:https://blog.csdn.net/wodeai1235/article/details/54755735 1.模型和图像: 2.数学定义推导和优化: 3.流程 ...

  5. map+case结构使用技巧

    people.txt文本如下 lyzx1, lyzx2, lyzx3, lyzx4, lyzx5, lyzx6, lyzx7, lyzx7,,哈哈 托塔天王 import org.apache.spa ...

  6. PHP 类名::class含义

    自 PHP 5.5 起,关键词 class 也可用于类名的解析. 使用 ClassName::class 可以获取一个字符串,包含了类 ClassName 的完全限定名称.这对使用了命名空间的类尤其有 ...

  7. Elasticsearch 节点角色说明

    节点类型 解释 作用 默认配置 专用节点 注意事项 Master-eligible node 主节点 负责轻量级群集范围的操作例如: 创建或删除索引 跟踪集群节点 分片分配 node.master: ...

  8. 2018-2019-1 20189221 《Linux内核原理与分析》第六周作业

    2018-2019-1 20189221 <Linux内核原理与分析>第六周作业 实验五 实验过程 将Fork函数移植到Linux的MenuOS fork()函数通过系统调用创建一个与原来 ...

  9. [LeetCode] 20. Valid Parentheses_Easy tag: Stack

    Given a string containing just the characters '(', ')', '{', '}', '[' and ']', determine if the inpu ...

  10. [Guitar self-learning] 基本乐理知识1. 度，升降记号#/b

    度:是音程上面的单位, 指每两个音程(音名)之前的音距.(就像我们说身高时的cm一样, 用来表明当时的音高.) 升记号:#   , 表明在当前的音高下, 升半个音高. 如 #3  ==  4 降记号: ...