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; width: 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);
    })

　　

转载于:https://www.cnblogs.com/lemonmoney/p/8656599.html