微信瀏覽器跳轉頁面後再返回，如何恢復到跳轉前的位置的問題。

不該相遇在秋天發表於2017-07-14
瀏覽器

 

以商品列表頁打比方，

 

眾所周知，點選商品進入詳情頁要保證不損壞當前列表頁狀態的做法通常是在a標籤上加上target=_blank進行新開一個視窗開啟詳情頁

 

這個做法是非常普遍的，包括很多很多牛叉的網站都是這麼玩的。

 

但是在微信瀏覽器裡行不通  因為微信瀏覽器只有一個視窗   無論任何形式的跳轉它都會銷燬當前視窗的內容連結新的頁面

 

所以不管是什麼target=_blank啊還是什麼history.go(-1)啊  統統都會強制重新整理重新渲染頁面

 

因為我是幹PHP的，所以面對這個問題第一想到的就是用cookie去快取，但是總覺得怪怪的，因為cookie的定位是儲存零散少量資料。

 

最終找到的解決辦法是使用HTML5的快取功能

 

localStorage  不限時的儲存  除非使用者手動清理

sessionStorage  與會話繫結 會話結束 資料消失  相比之下直接無視localStorage

 

HTML5的快取與cookie相比它可以儲存10M資料在客戶端，不同瀏覽器可儲存的大小有所差異，但都是cookie無法望其項背的。

當然，它不如cookie的便利之處是它無法與服務端進行互動。

 

然並卵

我就是需要它：

sessionStorage.getItem(key):獲取指定key本地儲存的值

sessionStorage.setItem(key,value)：將value儲存到key欄位

sessionStorage.removeItem(key):刪除指定key本地儲存的值

sessionStorage.clear();刪除所有

 

列表頁的跳轉a標籤就直接做成 href="javascript:void(0)"  onclick="go(url)" 

點選進入下面方法進行儲存  存好之後再跳轉

 

    function go(url){
        sessionStorage.setItem('index_list',$("#wrapper").html());//儲存列表資料
        sessionStorage.setItem('index_page',page);//儲存頁碼
        sessionStorage.setItem('index_scroll',$(window).scrollTop());//儲存滾動條位置
        window.location.href = url;
        return false;
    }

 

 

因為我做的列表載入效果是每次取出20條資料  每次展現5條  螢幕每次下滑到底就載入5條  

當20條資料都載入完之後再下滑到底 就ajax請求伺服器再取20條過來  再每次5條的給使用者載入

我感覺這麼做使用者體驗非常快  至少使用者覺得非常快  

有了ajax的加入  自然要把頁碼一起儲存   

 

下面是頁面初始化進行判斷，如果有快取，則使用快取，賦值頁碼，恢復滾動條位置。之後刪除快取以免造成汙染。

如果沒有快取則走正常流程。

        var l = sessionStorage.getItem('index_list');

        if(null !== l && '' !== l){

            //恢復資料
            $("#wrapper").html(l);
            $(window).scrollTop(sessionStorage.getItem('index_scroll'));
            page = sessionStorage.getItem('index_page');

            //刪除快取
            sessionStorage.removeItem('index_list');
            sessionStorage.removeItem('index_scroll');
        }else{
            p = {$data|json_encode};
            showData();
        };

　　

相關文章