微信浏览器后退刷新页面问题

最近在做微信浏览器网页项目的开发，就是在在微信浏览器中运行网页项目，遇到了各种问题，其中最常见的就是微信浏览器后退时的页面刷新问题。

遇到的问题：

从列表页浏览了10几页数据后，进入其中一个产品的详情页，然后再返回列表页时，页面会强制刷新，之前加载的数据全没了，又要从第一页开始。

经过我在各种手机上的测试之后，发现安卓和ios手机对于页面的刷新机制不一样。

安卓手机：

从列表页进入详情页，再后退回列表页时，页面会强制刷新，也就是说之前异步加载和数据和页面的操作全部没有了。

苹果手机:

从列表页进入详情页，再后退回列表页时，页不会刷新。

解决方案：

原理：利用浏览器的缓存机制
1.页面第一次加载时，判断缓存中是否有数据，如果有，载入缓存中的数据替换页面中的dom节点，并删除缓存中的数据
2.如果缓存中没有数据，执行原本的业务逻辑
3.进入详情页之前，将页面需要缓存的数据保存进缓存中（主要缓存的是dom节点和页面位置）

缓存可以选择cookie，sessionstorage，localstorag，这三者的区别我就不多赘述了，可以自行查询。我选择的是sessionstorage作为缓存使用，以下是demo案例：

列表页面

    
    
    
    




    
    

        

            分类1
            分类2
            分类3
            分类4
            分类5
            分类6
        
    

    
    

        

            

                
            
            

                名称：苹果手机
                价格：2000元
            
        
    
    

        加载更多
    

详情页面

    
    
    
    




    
这是详情页

注意要点：

1.如果页面数据的元素高度是自动而不是固定的话，可能会造成从缓存中恢复页面位置不正确的问题，比如设置图片的高度为auto,这是由于返回页面时，数据和位置恢复了,但此时图片还没有加载出来，页面的整体高度还没有被撑开，而$(window).scrollTop(scroll) 这段恢复页面位置的代码已经执行了，所以位置不正确。