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

 

以商品列表頁打比方，

 

衆所周知，點擊商品進入詳情頁要保證不損壞當前列表頁狀態的作法一般是在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();
        };