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

标签：体验   窗口   列表   set   tar   内容   target   rem   htm   

以商品列表页打比方，

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

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

标签：体验   窗口   列表   set   tar   内容   target   rem   htm   

原文地址：http://www.cnblogs.com/fengyumeng/p/7173072.html