本文主要是介绍微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最近在最微信端开发，遇到了一个比较有意思的问题。
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;}这篇关于微信 HTML5 实现列表页与详情页无刷新返回 seesionStorage的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
