最近在最微信端開發，遇到了一個比較有意思的問題。

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>

微信 HTML5 實現列表頁與詳情頁無刷新返回 seesionStorage