h5缓存 和 点击商品列表进入详情页点击返回按钮回到上次打开列表的位置

    最近几天能研究了一下客户端的缓存以及cookie的用法。

客户端缓存我个人选用一种就是在头部添加cache-control：max-age=(时间)秒，首先是在html的meta标签中添加但是在浏览器中查看到没有起作用，通过检查发现这个页面由于不是静态页面是通过后台数据返回的动态页面所以在meta中添加不起作用。后面与后台沟通让他们加上在浏览器中可以看到如下图：

第一次浏览网页：

第二次访问网页（使用刷新按钮或者f5刷新页面）

缓存添加成功。在5分钟内再次访问页面数据会从客户端缓存中拿，不会再访问后台服务，加快了浏览器的访问速度，提高了用户体验。

点击商品列表进入详情页点击返回按钮回到上次打开列表的位置

使用网页的cookie值实现功能。将商品列表的scrollTop获取到并且存入cookie中如下：

     
$('.serve-list').scroll(function(){
		$.cookie("gallery_scroll", $('.serve-list').scrollTop());
	})







然后编辑一个新的方法调用这个cookie值之后就可以使用 如下：


 
 $(function () {
		var str = parseInt($.cookie("gallery_scroll"));
		 if (str!='') {
			 $(".serve-list").animate({ scrollTop: str}, 1);
		}
	})







实现返回该页面自动回到上次打开的页面