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