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);