跨页面对比功能的实现

小伙伴们有没有遇到过跨页面进行对比的问题呢？比如说在某个详情页面点击对比，然后将信息暂时存在cookie中，在另一个页面点击对比，将之前存的信息取出来，和当前页面的数据进行对比。话不多说，上代码！

我还得说两句，思路是这样的：我们需要把当前页的信息存到cookie中，还要在点击对比的时候对页面进行一下渲染（不然别人不知道你是不是要对比啊？），在另一个页面再按对比的时候，在把cookie中存的数据取出来，和当前页的信息一起发给对比页。

点击对比触发事件如图：

在另一详情页面点击对比如图：

这样点击对比就可以对两者就行对比了！！！

代码如下：

    var _list = [];
    //对比信息存cookie
    function cookieSave(id, name, organ){
        var cookieStr = id+'|'+name+'|'+organ;
        $.cookie("expert", cookieStr);
    }
    //取cookie对比信息
    function cookieGet(){
        var cookieStr = $.cookie("expert");
        if(cookieStr!=null){
            var arr = cookieStr.split("|");
            _list.push({id:arr[0], name:arr[1], organ:arr[2]});
        }
    }
    //渲染div
    function renderCompare(){
        //$("#compareDiv").css('display','block');
        cookieGet();
        var html = '';
        for (var i = 0; i < this._list.length; i++) {
            var grayCss = i % 2 == 0 ? 'gray02' : '';
            var dt = '';
            if(this._list[i]['name']!=null){
                dt += '<dt>' + this._list[i]['name'] + '</dt>';
            }
            html += '<div class="expertBox left ' + grayCss + '" οnclick="delList(' + i + ')"><img src="'+_PUBLIC+'/v2/images/expert.png"/><dl>' + dt + '</dl></div>';
        }
        layer.open({
            type: 1,
            area: ['300px', '360px'],
            title:"专家对比",
            shadeClose: true, //点击遮罩关闭
            content:'<div class="expertMain" id="compareDiv" style="width: 300px; float: right; position: relative; bottom: 50px;z-index: 20">' +
                    '<div class="scrollTitle">专家对比</div>' +
                    '<div class="scrollBar" id="compareOrgan"></div>' +
                    '<div>' +
                    '<a href="#" οnclick="Compare()" class="compare">对比</a>' +
                    '</div>' +
                    '</div>'
        });
        $("#compareOrgan").html(html);
        cookieSave(_list[0]['id'], _list[0]['name'], _list[0]['organ']);
    }
    //添加对比数据
    function addList(id, name, organ) {
        if (this._list.length >= 2) {
            this._list.shift();
        }
        this._list.push({id: id, name: name, organ:organ});
        renderCompare(id, name, organ);
    }
    //对比
    function Compare() {
        if (this._list.length < 2) {
            alert("数据不足，无法比对");
            return;
        }
        window.location.href ="../Expert/expert_compare" + "?id1=" + this._list[0]['id'] + "&id2=" + this._list[1]['id'];
    }

ps：以上方法直供参考，用的话需要引入jquery.cookie.js和layer.js!