web自定义返回功能

最近做一个项目有些页面需要加上返回按钮，在浏览器上由于可以随意输入页面地址所以这个返回便不是想像的那么好做了。

但是静下来想一下只要保证维持一个有序的数组，返回便有可能实现。难点在何时改变数组内哪条数据、何时添加、何时删除。

1.当一进入页面时立即保存该页面的全地址，包括参数（所以该功能只针对get请求有效，post请求由于不在 url上直接加参数所以不能用该思路）。

2.不管你从哪个url进入都需要正常返回，所以每个页面需要一个缺省返回地址，退当找不到上级时启用该地址。

3.当用户刷新时某个页面时要需要判断数组中是不是有相同的全地址如果有就采用截断方式来保证该功能的不发生重复跳转(即获取数组中该参数的值置，并把该参数后面所有的数据全删除)

4.存储方式：采用了双存储模式 sessionStorage和cookie,并存入时对数据进行64位编码

5.需要用到jquery和jquery的base64插件.

function sessionOrCookieStorageGet(key){
    $.base64.utf8encode = true;
    var value = null;
    if(window.sessionStorage){
        value = sessionStorage.getItem(key);
    }else{
        value = $.cookie(key,{path:'/'});
    }
    if(value!=null&&value!=undefined){
        value = $.base64.atob(value,true);
    }
    return value;
}
function sessionOrCookieStoragePut(key,value){
    $.base64.utf8encode = true;
    if(window.sessionStorage){
        sessionStorage.removeItem(key);
        try{sessionStorage.setItem(key,$.base64.btoa(value))}catch(e){return false;}
    }else{
        try{ $.cookie(key,$.base64.btoa(value),{expires: 1,path:'/'});}catch(e){return false;}
    }
    return true;
}

thisUrl：即当前请求的全地址如(http://www.baidu.com/afaf?a=b)

thisAction：为当前ur唯一标识用于区分url

isReplacePrev：当判断到thisAction相同时是否采用截断

default；缺省url

//设置返回url
function prevBackSet(thisUrl,thisAction,isReplacePrev){
        thisUrl = thisUrl.replace(/%2F/g,"/");
    if(thisAction=="index"){//排除主页
        sessionOrCookieStoragePut("prevUrl",JSON.stringify([]));
        return;
    }
    var prevUrl = sessionOrCookieStorageGet("prevUrl");
    if(prevUrl!=null&&prevUrl!=undefined){
        prevUrl = JSON.parse(prevUrl);
        var index = $.inArray(thisUrl,prevUrl);
        if(index!=-1&&prevUrl.length>index+1) {//把后面的全干掉
            prevUrl.splice(index+1, prevUrl.length - index - 1);
        }else if(index==-1&&isReplacePrev!=undefined&&isReplacePrev){

            for(var i=0;i<prevUrl.length;i++){
               var j = prevUrl[i].indexOf("site/"+thisAction);
                if(j==-1){
                    j = prevUrl[i].indexOf("user/"+thisAction);
                }
                if(j>-1){
                    prevUrl.splice(i, prevUrl.length - i);
                    prevUrl[prevUrl.length] = thisUrl;
                    break;
                }
            }
            index = $.inArray(thisUrl,prevUrl);
            if(index==-1){
                prevUrl[prevUrl.length] = thisUrl;
            }
        }else if(index==-1){
            prevUrl[prevUrl.length] = thisUrl;
        }
    }else{
        prevUrl = [thisUrl];
    }

    sessionOrCookieStoragePut("prevUrl",JSON.stringify(prevUrl));
}

//返回上一页
function prevBackFun(thisUrl,defaultUrl){
    thisUrl = thisUrl.replace(/%2F/g,"/");
    var prevUrl = sessionOrCookieStorageGet("prevUrl");
    if(prevUrl==null||prevUrl==undefined){
      //  sessionOrCookieStoragePut("prevUrl",JSON.stringify([]));
        location.href = defaultUrl;//缺省跳转地址
        return;
    }
    prevUrl = JSON.parse(prevUrl);
    if(prevUrl.length<=1){
        location.href = defaultUrl;//缺省跳转地址
        return;
    }
    var index = $.inArray(thisUrl,prevUrl);
    if(index!=-1){

        var url = prevUrl[index-1];//得到要返回的URL
        //返回前删除这个url
      //  prevUrl.splice(index-1,prevUrl.length-index-1);
       // sessionOrCookieStoragePut("prevUrl",JSON.stringify(prevUrl));
        location.href = url;
        return;
    }else{
       // sessionOrCookieStoragePut("prevUrl",JSON.stringify([]));
        location.href = defaultUrl;//缺省跳转地址
        return;
    }
}

以上代码我是放在yii2上使用的

thisUrl则用的的Yii:$app->request->url;

thisAction用的Yii:$app->controller->action->id;

在需要用到返回的页面一开始就调用调用

prevBackSet(thisUrl,thisAction,isReplacePrev); //函数

//在返回的按钮上调用<pre code_snippet_id="1953717" snippet_file_name="blog_20161028_2_1854162" name="code" class="javascript">prevBackFun(thisUrl,defaultUrl);