his ont 恢复 func 详情 size light list
以商品列表页打比方,
众所周知,点击商品进入详情页要保证不损坏当前列表页状态的做法通常是在 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();
- };
微信浏览器跳转页面后再返回,如何恢复到跳转前的位置的问题。
来源: http://www.bubuko.com/infodetail-2170409.html