公告方法，本地儲存函式

saveLoaded: {
    // 累積陣列的方法
    saveDataToArr: function(publicArr, dataArr) {
      publicArr = publicArr.concat(dataArr);
      return publicArr;
    },
    // 將資料儲存到sessionStorage的方法
    saveDataToSession: function(key, value) {
      value = JSON.stringify(value);
      sessionStorage.setItem(key, value);
    },
    // 獲取sessionStorage的方法
    getDataFromSession: function(key) {
      return JSON.parse(sessionStorage.getItem(key));
    },
    // 刪除sessionStorage的方法
    cleanData: function(key) {
      sessionStorage.clear(key);
    }
  },
 

 先定義好需要快取的變數

var publicArr = [];

var pageNo = 1;

var titleIndex = JSON.parse(sessionStorage.getItem('titleIndex')) || null;    //頭部標題索引

var titleTagId;       //頭部標題 id

var saveObj = {};

var isLoad = true;

var isWeixin = utils.isWeixin();

在點選列表進入詳情頁的時候將資料放入 saveObj 中快取，把列表資料放入 publicArr

publicArr = utils.saveLoaded.saveDataToArr(publicArr, r.data);   //積累陣列

listClick();    // 呼叫點選事件

function listClick() {
    //點選事件
    $('.list-content').click(function(e){
      saveObj = {
        // 列表陣列
        array: publicArr,
        // 列表分頁
        pageNo: pageNo,
        // 滾動條位置
        scrollTop: isWeixin ? $('body').scrollTop() : document.documentElement.scrollTop, 
        // 頭部標題的id 
        titleTagId: titleTagId,
        // 頭部導航條的移動位置
        translates: translates,
      };
      // listTxt為快取的陣列
      utils.saveLoaded.saveDataToSession('listTxt', saveObj);
      // 用titleIndex來判斷是否有快取的情況
      sessionStorage.setItem('titleIndex',JSON.stringify(titleIndex));
      // 跳轉頁面
      var listId = $(this).data('id');
      location.href = '#/home/detail?id='+listId;
    });
  }
 

當點選列表頁進入詳情頁 再返回的時候

// 有快取
if(titleIndex){
      // 獲取sessionStorage的方法
      if (utils.saveLoaded.getDataFromSession('listTxt')) {
        // 拿到快取的資料
        var listObj = utils.saveLoaded.getDataFromSession('listTxt');
        var listData = listObj.array;
        // 快取的分頁
        pageNo = listObj.pageNo;
        // 快取的陣列
        publicArr = listData;
        // 快取的頭部標題id
        titleTagId = listObj.titleTagId;
        // 快取的導航條位置
        translates = listObj.translates;
        $('.content-title-con').css("transform","translate3d("+translates+"px,0px,0px)");

        var listTxt ={};
        listTxt.contentList = [];

        // 遍歷 listData 陣列拿資料
        _.each(listData, function(item,index) {
          var contentObj = {
            id: item.id,
            title: item.title,
            creationTime: item.creationTime.substring(0,10),
            source: item.source,
          }
          if (item.url) contentObj.url = item.url;
          try {
            contentObj.picture = JSON.parse(item.picture)[0].fileUrl;
          } catch (error) {
          }
          listTxt.contentList.push(contentObj);
        });


        $('.content-item').html(_.template(__inline('home_temp/content_temp.html'), listTxt));
        
        // 判斷是在微信還是瀏覽器
        if (isWeixin) {
          $('body').scrollTop(listObj.scrollTop);
        } else {
          $('html').scrollTop(listObj.scrollTop);
        }
        
        // 呼叫點選事件
        listClick();
        
        // 清除快取
        utils.saveLoaded.cleanData('listTxt');
        utils.saveLoaded.cleanData('titleIndex');
      } else {
        getCmsList(menuList[titleIndex].id, true);
      }

    }else{
      getCmsList(); // 首次進入頁面的顯示效果
    }