實(shí)現(xiàn)目標(biāo)

當(dāng)前瀏覽到第N頁(yè)，點(diǎn)擊某一個(gè)新聞，進(jìn)入新聞詳情頁(yè)，點(diǎn)擊返回時(shí)，列表數(shù)據(jù)不重新加載，焦點(diǎn)仍定位在進(jìn)入詳情頁(yè)之前的位置。

思路

1. 緩存列表內(nèi)已展示的數(shù)據(jù)；
2. 進(jìn)入詳情頁(yè)時(shí)在緩存內(nèi)添加該新聞的ID（鍵為articleId）；
3. 返回時(shí)在js內(nèi)判斷緩存內(nèi)是否包含articleId，如果存在，則通過(guò)緩存的列表數(shù)據(jù)進(jìn)行頁(yè)面渲染；
4. 通過(guò)articleId定位元素，滾動(dòng)窗口值該元素處；
5. 緩存不能始終存在。

根據(jù)當(dāng)前項(xiàng)目情況，考慮緩存放入sessionStorage，滾動(dòng)窗口使用IScroll。

實(shí)現(xiàn)方案

1、緩存列表數(shù)據(jù)

//cacheKey 緩存key  cacheValue 緩存內(nèi)容json結(jié)構(gòu)  position 值為before和after分別用于加載最新和加載下一頁(yè) 
function addToCache(cacheKey,cacheValue,position){
    cacheValue = JSON.stringify(cacheValue);
    var allCacheData = sessionStorage.getItem(cacheKey);
    if(allCacheData != null){
        if(position == "before"){
            allCacheData = cacheValue + "::::" +allCacheData;
        } else {
            allCacheData = allCacheData + "::::" + cacheValue;
        }
    } else {
        allCacheData = cacheValue;
    }
    sessionStorage.setItem(cacheKey,allCacheData);      
}  

• sessionStorage只能存儲(chǔ)字符串，需要將json結(jié)構(gòu)的對(duì)象轉(zhuǎn)為字符串進(jìn)行存儲(chǔ)
• 如果列表數(shù)據(jù)特別多，應(yīng)該和業(yè)務(wù)確認(rèn)緩存數(shù)據(jù)條數(shù)，截取僅是字符串操作，這里不再展開(kāi)

2、進(jìn)入詳情頁(yè)

$(".article").click(function(){     
  sessionStorage.setItem("articleId",$(this).attr("id"));
})  

• 在每條新聞上綁定事件，點(diǎn)擊時(shí)設(shè)置文章ID至緩存，正常來(lái)說(shuō)在詳情頁(yè)設(shè)置，但是因?yàn)檫@個(gè)項(xiàng)目?jī)?nèi)的詳情頁(yè)不是我們部門的，所以只能在列表頁(yè)設(shè)置；

3、返回時(shí)列表內(nèi)js判斷是從詳情頁(yè)返回的還是一次新的訪問(wèn)

var articleId = sessionStorage.getItem("articleId");
var cacheData = sessionStorage.getItem($scope.initType);
if(articleId != null && cacheData != null){ //從詳情頁(yè)返回且列表緩存數(shù)據(jù)不為空
    showTableDataWithCache(cacheData,articleId);
    removeCache("articleId");//注意使用一次就清理掉
}else { //一次新的訪問(wèn)，要清理掉所有相關(guān)緩存
    removeAllFuturesCache();
    loadPage(1);
}

4、定位至對(duì)應(yīng)元素

//注意IScroll需要重新初始化
myScroll = new IScroll('#wrapper', {
    probeType: 3,
    disableMouse: true,
    momentum: true,
    mouseWheel: true,
    disablePointer: true,
    click: true,
    tap: true,
    resizePolling: 1,
    // x
  });

//滾動(dòng)至對(duì)應(yīng)元素
myScroll.scrollToElement(document.querySelector("[id='"+detailArticleId+"']"),10,true,true);
initScroll();
myScroll.refresh();  

• 注意IScroll需要重新初始化;
• scrollToElement的選擇器格式是[id='articleId']而不是正常的"#articleId";10 是動(dòng)畫時(shí)間 true true這樣設(shè)置會(huì)將元素顯示在窗口中間；

總結(jié)

1. sessionStorage是單個(gè)窗口級(jí)的緩存，同一個(gè)窗口內(nèi)的數(shù)據(jù)可緩存在其內(nèi)；
2. IScroll可以作為頁(yè)面滾動(dòng)的組件；
3. 詳情頁(yè)返回列表不刷新問(wèn)題可以分解為三個(gè)小問(wèn)題：
   1. 緩存列表數(shù)據(jù)
   2. 添加從詳情頁(yè)返回的標(biāo)記（文章詳情ID）
   3. 用緩存數(shù)據(jù)渲染頁(yè)面后滾動(dòng)窗口至對(duì)應(yīng)元素
      通過(guò)sessionStorage存儲(chǔ)數(shù)據(jù)，這樣很多功能都可以實(shí)現(xiàn)，比如返回時(shí)標(biāo)簽選中等都是一樣的思路，進(jìn)入詳情頁(yè)時(shí)設(shè)置對(duì)應(yīng)值，在頁(yè)面加載時(shí)判斷對(duì)應(yīng)的緩存數(shù)據(jù)是否存在進(jìn)而展開(kāi)業(yè)務(wù)，這里不再展開(kāi)。

參考：
sessionStorage介紹
IScroll使用

個(gè)人博客,歡迎來(lái)訪！
www.onecoderspace.com