微信浏览器跳转页面后再返回,如何恢复到跳转前的位置的问题。
以商品列表页打比方,
众所周知,点击商品进入详情页要保证不损坏当前列表页状态的做法通常是在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(); };