以商品列表頁打比方，

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

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