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