• H5 本地存储localStorage的使用(返回前一页浏览的历史位置)


    最近在做微信网页优化,,发现在微信中浏览列表的时候滑到了一个中间的位置,点击了某一个详情,可是从详情页返回之后发现列表又重新开始返回到了第一个,列表的数据下拉通过ajax加载数据,从详情页返回的时候页面进行了刷新,原来的数据被刷掉了,这几天百度了很多,刚开始看着很懵逼,询问了一些大佬,参考了百度到的东西,慢慢的摸索,终于解决了这个问题,记录一下,方便以后使用。代码如下:

    HTML页面:

       <div class="list-main-mian weui-form-preview infinite weui-pull-to-refresh" id="listwrap" style="height:100%; margin-top: 1px;overflow:auto; background-color: #fff; border: none;  100%; z-index: 1">
            <!--下拉刷新-->
            <div class="weui-pull-to-refresh__layer" style="padding: 5px;margin-top: -40px;">
                <div class='weui-pull-to-refresh__arrow'></div>
                <div class='weui-pull-to-refresh__preloader'></div>
                <div class="down">下拉刷新</div>
                <div class="up">释放刷新</div>
                <div class="refresh">正在刷新</div>
            </div>
            <div id="companylist" style="background-color: #f3f3f3;">
              
            </div>
            <div class="weui-loadmore" style="padding-bottom:30px;height:20px">
                <i class="weui-loading"></i>
                <span class="weui-loadmore__tips">正在加载</span>
            </div>
        </div>

     js 文件:

            //页面滚动获取滚动条距离顶部的距离    
            $("#listwrap").scroll(function (event) {
                //  console.log( $("#listwrap").scrollTop());
                window.localStorage.setItem("scrollY", $("#listwrap").scrollTop());
            });
    
            //获取保存好的Ajax加载的数据,如果不存在,赋值为空    
            var ProjectListAjaxData = localStorage.getItem("ProjectListAjaxData");
            if (ProjectListAjaxData == null) {
                ProjectListAjaxData = "";
            }
    //加载ajax数据
    function loadcarrier() {
            var html = "";
            $.ajax({
                type: "POST",
                url: "/Company/ListCompany",
                data: {
                    'page': pages,
                    'size': sizes,
                },
                dataType: "html",
                error: function (request) {
                    $('.weui-loadmore').hide();
                    html += "<div class="weui-cells__title">已无更多数据</div>";
                    $("#companylist").append(html);
                },
                success: function (data) {          
                    $("#companylist").append(data);
                   // console.log(data);
                    //记录浏览项目异步加载的数据
                    ProjectListAjaxData = ProjectListAjaxData + data;
                    window.localStorage.setItem("ProjectListAjaxData", ProjectListAjaxData);
                    window.localStorage.setItem("page", pages);//记录翻页的页数  
                }
            });
        }
    $(document).ready(function () {
        //判断是否是从详细页面返回  
        if (window.localStorage.getItem("openDetails")) {
            //使用完马上删除    
            window.localStorage.removeItem("openDetails");
            //页面回跳插入ajax加载 data     
            ProjectListAjaxData = localStorage.getItem("ProjectListAjaxData");
            if (ProjectListAjaxData != null && ProjectListAjaxData != "") {
                console.log(ProjectListAjaxData);
                $("#companylist").append(ProjectListAjaxData); //把cookie数据放进列表  
            }
            else {
                ProjectListAjaxData = "";
            }
            //页面回跳跳转的位置    
            var scrollY = window.localStorage.getItem("scrollY");
            page = window.localStorage.getItem("page");
    
            if (scrollY) {
                $("#listwrap").animate({ scrollTop: scrollY }, 0);
            }
        }
        else {       //如果不是从详情页返回
            //清除缓存页面数据session    
            ProjectListAjaxData = "";
            window.localStorage.removeItem("ProjectListAjaxData");
            window.localStorage.removeItem("scrollY");
            loadcarrier(); //加载数据
    
        }
    
    });

     在详情页设置:

        $(function () {
            window.localStorage.setItem("openDetails", 1);
        })
    

      

  • 相关阅读:
    BZOJ 3514 Codechef MARCH14 GERALD07加强版
    WT
    Codeforces 348
    POI 2010
    Codeforces 336
    MVC实例及用三层架构实现对学生信息的增删改查
    欠拟合和过拟合
    线性回归案例
    梯度下降法介绍
    线性回归的损失函数和梯度下降
  • 原文地址:https://www.cnblogs.com/lemonmoney/p/8656599.html
Copyright © 2020-2023  润新知