最近在最微信端开发，遇到了一个比较有意思的问题。
1：商品分页列表页
2：商品详情页
需求: 实现当在第N页的列表页，点击ID=Num的商品详情页，跳转到详情页后，再点击返回按钮，依旧返回到列表第N页，并显式的改变ID=Num商品的查看状态
注：详情页与列表页是两个视图页，并且要考虑弱网请求服务端接口比较慢的情况
解决思路：使用sessionStorage
在列表页中将请求服务端接口返回的列表信息使用一个对象dataList存储起来，并记录当前的页码pageIndex，当点击跳转某个商品详情页之前，将dataList与pageIndex存储进sessionStorage中，当第二次返回到列表页后，先去sessionStorage中寻址，看能不能找到缓存的列表信息，如果存在，就直接使用缓存中的dataList填充列表页，同时清除seesionStorage中的listData缓存，如果不存在，就请求服务端接口填充列表
代码如下
1 <script> 2 var pageIndex = 0; 3 var historyData = []; 4 var numID=‘id_0‘; 5 var listData = {}; 6 7 $(function () { 8 if (sessionStorage.getItem("listData")) { 9 state = JSON.parse(sessionStorage.getItem("listData"));10 sessionStorage.removeItem("listData");11 pageIndex = state.pageIndex;12 numID = state.numID;13 historyData = state.historyData;14 for (var i = 0; i < historyData.length; i++) {15 //填充列表的方法16 }17 //改变已查看的商品样式方法18 } else {19 LoadData();20 }21 })22 23 function LoadData() {24 $.ajax({25 type:‘get‘,26 async:false,27 url:currentUrl+‘leave/GetVacationInfos‘,28 headers: {29 "Token": token 30 },31 data:{32 uid:"xxx",33 pageSize:pageSize,34 pageIndex:pageIndex,35 },36 dataType:‘json‘,37 success: function (result) {38 for (var i = 0; i < result.length; i++) {39 historyData.push({data:result[i]});40 }41 pageIndex++;42 }43 })44 }45 46 47 function ToDetail(id) {48 state = { pageIndex: pageIndex, numID: numID, historyData: historyData };49 sessionStorage.setItem("listData", JSON.stringify(state));50 window.location = ‘ToDetail?numID=‘ + id;51 }52 </script>
