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. du 查看文件大小

    [root@localhost ~]# du -sh /etc # 查看目录下所有文件大小 [root@localhost ~]# du -sh * # 查看所有文件大小

  2. centos7.2 mysql5.5编译安装

    环境 centos7.2 源码包mysql5.5.38 mysql5.5开始,源码配置编译工具configure变成了cmake,所以先要去把cmake装上.并安装make,bison,cmake,g ...

  3. 001-快速搭建Spring web应用【springboot 2.0.4】-gradle、springboot的启动过程分析、gradle多模块构建

    一.概述 学习<精通Spring MVC4>书籍笔记 二.笔记 1.快速构建Spring starter web项目几种方式 1>使用Spring Tool Suite生成Start ...

  4. Java-idea-常用插件-lombok

    1.插件安装 打开perferences或者settings,找打plugins,选择Browse repositories...,搜索lombok,下载安装重启即可. 2.支持的注解: 2.1.@G ...

  5. cookie存值 后取值是string string字符串转对象

    实现方法 // 得到 对象 格式或 json 格式的一个字符串 var str = '{"name":"张根硕","age":"1 ...

  6. clone git 项目到 非空目录

    如果我们往一个非空的目录下 clone git 项目,就会提示错误信息: fatal: destination path '.' already exists and is not an empty ...

  7. Python 全栈开发五 迭代器 生成器 装饰器

    一.迭代器 迭代协议:对象必须提供一个next方法,执行该方法后会返回迭代的下一项或者抛出Stopiteration异常,终止迭代.切只能往前,不能倒退. 可迭代对象:遵循迭代写一点对象就是可迭代对象 ...

  8. 6个炫酷又好用的 Python 工具，个个都很奔放呀

    贝多芬写完<第九交响曲>后说:it's done:耶稣在被处死前说:it is done:<指环王>结尾摧毁魔戒后Frodo说:it's done! 我整理完这6个Python ...

  9. 如何比sketch和axure更方便地给原型做交互？

    在快速的工作环境中,我们现在都希望在工作的各个环节中提高效率.有些产品设计师们做产品原型时,会感觉sketch或者axure添加交互的方式不够快捷.下面就提供一种解决方案. 使用工具:墨刀. 交互链接 ...

  10. js动态规划---最长子序列（lcs）

    function LCS(wordX, wordY) { var m = wordX.length; var n = wordY.length; this.lcs = function(){ var ...