多页面同步数据，同步操作，非长链接

阅读前知识普及

以下提到请谷歌的都是能直接找到的，我觉得自己搜下能加深记忆！

1、本地缓存：高级浏览器的localStorage和IE 8.0以下版本的的userData

1.1、localStorage：本地缓存，只能存储字符串，除了IE8其他容量均为5M。localStorage是跟随domain的

  前面说了，这是高级浏览器的，怎么玩？请你谷歌吧。玩之前记得判断是否有的玩。

1.2、userData：这是微软专门给ie开辟的一个存储空间，理论上只支持windows+ie的组合

  使用方式？请谷歌......

1.3、domain：位于document，直接document.domain=XXX；或者 var _domain=document.domain，就可以取到和赋值

 使用注意：假如你有A页面，域名为:www.XXX.bb.com，在该页面内部嵌套了一个iframe，加载的时候浏览器会自动为iframe加入document.domain=www.XXX.bb.com，

 第三方iframe不算，这时，如果你改变了A页面的domain那么你将无法修改，操作iframe内部的dom，如果iframe的域名是，xxx.XXX.bb.com那么不管你是否修改

      了domain都将无法修改操作。

 解决方案：设置A页面的document.domain=XXX.bb.com，iframe页面手写js   document.domain=XXX.bb.com这样就能操作，至于为什么？请你谷歌吧....网上有各种答 案。

---------------------------------------------------------------------------------

思路

同步数据，同步操作

1、解决同步数据

数据需要多页面同步那么数据存储的地方必须一致，这里我们考虑使用本地存储，使用简单，容量不小，缺点：只能存储字符串

2、解决同步操作

A页面怎么知道B页面进行某些操作呢？他们没有共通的交互接口，但是可以为他们创造共同的某个数据源，并监听这个数据源，当发现数据源改变的时候，我们执行某个操作，这个操作存在每个页面

3、为啥会有3？因为还需要解决一个问题，当需要同步的页面不是同一个域名下的时候本地存储将无法做到数据源相同，前面的普及上有讲，localStorage是跟随domain的，所以我们引用上面那个解决方案，加入一个iframe，数据源都取这个iframe的localStorage

代码

//我们要在iframe创建一个对象

/*
多页面操作，工厂
*/
var OMP = function (dataKey, isDistribution, distributionFunction) {
    /*
    构造参数说明：
    dataKey：数据存储建,string;
    isDistribution：分发判定方法,function,必须有返回值(bool);
    distributionFunction：分发具体操作,function
    */
    this.isInit = false;
    this.dataKey = "";
    this.dataKey = dataKey;
    var that = this;
    if (SOD && SOD.localData) {
        //轮询监听
        var forMonitor = setInterval(function () {
            if (typeof isDistribution === "function" && isDistribution.call(that) === true && typeof distributionFunction === "function") {
                distributionFunction.call(that);
            }
        }, 500);
        //初始化成功
        this.isInit = true;
    }
};
//插入数据
OMP.prototype.insetData = function (datas) {
    if (this.isInit) {
        SOD.localData.setItem(this.dataKey, datas);
        SOD.localData.setItem(this.dataKey + "-date", new Date().getTime());
    }
};
//获取数据
OMP.prototype.getItem = function () {
    if (this.isInit) {
        return SOD.localData.getItem(this.dataKey) || "";
    }
    return "";
};
//获取数据插入时间
OMP.prototype.getInsetDate = function () {
    if (this.isInit) {
        return SOD.localData.getItem(this.dataKey + "-date") || "0";
    }
    return "0";
};
//删除数据
OMP.prototype.removeData = function () {
    if (this.isInit) {
        SOD.localData.removeItem(this.dataKey);
    }
};

我们在主页面进行调用

//监听逻辑
var isDistribution = function () {
    //这里的this是指OMP的实例
    //本地存储数据
    var thatData = this.getItem(),
    //本地存储数据存入时间
     thatDataInSetDate = this.getInsetDate(),
    //相等(本页面请求到的数据和本地存储的数据是否相等,比较的是2个数据的时间)
     isequal = self.dataInSetDate == thatDataInSetDate,
    //本地存储是否为空(这边得转成bool)
     isnull = thatData && thatData.length ? true : false,
    //本地存储数据插入时间
     thatDataInSetDate = parseInt(thatDataInSetDate) || 0,
    //是否已经延迟
     isTimeOut = self.initDate > thatDataInSetDate;
    /*
    本页面请求到的数据和本地存储的数据不想等
    本地存储不为空
    页面初始化时间<本地存储时间
    */
    return !isequal && isnull && !isTimeOut;
    //return isnull && !isTimeOut;
};

//监听逻辑通过后的回调
var distributionFunction = function () {
    var thatData = this.getItem(),
    //本地存储数据存入时间
     thatDataInSetDate = this.getInsetDate();
    self.dataInSetDate = thatDataInSetDate;
    /*具体执行的业务逻辑*/
};

var _OMP = document.getElementById("iframeXXXXX").contentWindow.OMP;
_OMP = new _OMP("xxxxWindow", isDistribution, distributionFunction);
//var _OMP = new (document.getElementById("iframeXXXXX").contentWindow.OMP)("vistorWindow", isDistribution, distributionFunction);
var ajax = {
    url:"",
    data: {}           
    type: "GET",
    dataType: "json",
    cache: false,
    success: function (data) {
        if (data.success && data.data.popwin) {
            _OMP.insetData(objToJson(setData([data.data.popwin])[0]));
        }
    }
};
$.ajax(ajax);
var forGet = setInterval(function () {
    $.ajax(ajax);
}, 60000);

好了 基本讲完了 如有错误和不解的请留言=_=