H5 本地存儲localStorage的使用(返回前一頁瀏覽的歷史位置)
阿新 • • 發佈:2018-03-27
span fun tco fresh 是否 nim 不存在 解決 coo
最近在做微信網頁優化,,發現在微信中瀏覽列表的時候滑到了一個中間的位置,點擊了某一個詳情,可是從詳情頁返回之後發現列表又重新開始返回到了第一個,列表的數據下拉通過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 = sessionStorage.getItem("ProjectListAjaxData"); if (ProjectListAjaxData == null) { ProjectListAjaxData = ""; }
//加載ajax數據
function loadcarrier() { var html = ""; $.ajax({ type: "POST", url: "/Company/ListCompany", data: { ‘page‘: pages, ‘size‘: sizes, }, dataType: "json", 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); })
H5 本地存儲localStorage的使用(返回前一頁瀏覽的歷史位置)