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

 

以商品列表頁打比方，

 

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