zoukankan      html  css  js  c++  java
  • 微信浏览器跳转页面后再返回,如何恢复到跳转前的位置的问题。

    以商品列表页打比方,

     

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

      

  • 相关阅读:
    海量数据中,寻找最小的k个数。
    快速排序
    反转一个单链表,分别以迭代和递归的形式来实现
    N个大小不等的自然数排序,时间复杂度为O(n),空间复杂度为O(1)
    堆排序
    两个已经排好序的链表合并为一个有序链表
    字符串过滤空格、回车、tab
    求一个浮点数的连续子序列最大乘积 (2013 小米校园招聘笔试题)
    单向循环链表队列,从头开始报数,当报到m或者m的倍数的元素出列
    给一个数组,元素都是整数(有正数也有负数),寻找连续的元素相加之和为最大的序列。
  • 原文地址:https://www.cnblogs.com/fengyumeng/p/7173072.html
Copyright © 2011-2022 走看看