微信 HTML5 實現列表頁與詳情頁無重新整理返回 seesionStorage
阿新 • • 發佈:2019-01-27
最近在最微信端開發,遇到了一個比較有意思的問題。
1:商品分頁列表頁
2:商品詳情頁
需求: 實現當在第N頁的列表頁,點選ID=Num的商品詳情頁,跳轉到詳情頁後,再點選返回按鈕,依舊返回到列表第N頁,並顯式的改變ID=Num商品的檢視狀態
注:詳情頁與列表頁是兩個檢視頁,並且要考慮弱網請求服務端介面比較慢的情況
解決思路:使用sessionStorage
在列表頁中將請求服務端介面返回的列表資訊使用一個物件dataList儲存起來,並記錄當前的頁碼pageIndex,當點選跳轉某個商品詳情頁之前,將dataList與pageIndex儲存進sessionStorage中,當第二次返回到列表頁後,先去sessionStorage中定址,看能不能找到快取的列表資訊,如果存在,就直接使用快取中的dataList填充列表頁,同時清除seesionStorage中的listData快取,如果不存在,就請求服務端介面填充列表
程式碼如下
var pageIndex = 0; var historyData = []; var numID='id_0'; var listData = {}; $(function () { if (sessionStorage.getItem("listData")) { state = JSON.parse(sessionStorage.getItem("listData")); sessionStorage.removeItem("listData");//防止調轉回列表頁,點選重新整理時,繼續讀快取 pageIndex = state.pageIndex; numID = state.numID; historyData = state.historyData; for (var i = 0; i < historyData.length; i++) { //填充列表的方法 } //改變已檢視的商品樣式方法 } else { LoadData(); } }) function LoadData() { $.ajax({ type:'get', async:false, url:currentUrl+'leave/GetVacationInfos', headers: { "Token": token }, data:{ uid:"xxx", pageSize:pageSize, pageIndex:pageIndex, }, dataType:'json', success: function (result) { for (var i = 0; i < result.length; i++) { historyData.push({data:result[i]}); } pageIndex++; } }) } //跳轉詳情頁的方法(點選列表某一行時,呼叫) function ToDetail(id) { state = { pageIndex: pageIndex, numID: numID, historyData: historyData }; sessionStorage.setItem("listData", JSON.stringify(state)); window.location = 'ToDetail?numID=' + id; }