解决思路:使用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;
}