微信浏览器跳转页面后再返回，如何恢复到跳转前的位置的问题。

 

以商品列表页打比方，

 

众所周知，点击商品进入详情页要保证不损坏当前列表页状态的作法一般是在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();
        };