admin管理员组

文章数量:1582655

以商品列表页打比方，

 

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

点击进入下面方法进行存储  存好之后再跳转

 

1

2

3

4

5

6

7

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的加入  自然要把页码一起存储   

 

下面是页面初始化进行判断，如果有缓存，则使用缓存，赋值页码，恢复滚动条位置。之后删除缓存以免造成污染。

如果没有缓存则走正常流程。

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

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();

};

　　

本文标签： 跳转浏览器位置页面

版权声明：本文标题：微信浏览器跳转页面后再返回，如何恢复到跳转前的位置的问题。 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dianzi/1727894317a1136639.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。