問(wèn)題

最近碰到兩個(gè)問(wèn)題：

• 從首頁(yè)進(jìn)入列表頁(yè)之后，點(diǎn)擊下一頁(yè)的時(shí)候，使用ajax請(qǐng)求更新數(shù)據(jù)， 然后點(diǎn)擊瀏覽器“后退”按鈕就直接返回到首頁(yè)，實(shí)際這里想要的效果是返回列表頁(yè)上一頁(yè)。
• 在列表頁(yè)分頁(yè)為2的頁(yè)面進(jìn)入詳情頁(yè)，然后點(diǎn)擊“后退”按鈕，返回的事列表頁(yè)分頁(yè)為1的頁(yè)面。沒(méi)法記住之前分頁(yè)狀態(tài)。

優(yōu)化前代碼

代碼如下，在頁(yè)數(shù)變化的時(shí)候，去異步請(qǐng)求數(shù)據(jù)，渲染頁(yè)面。

const currentChange = (currentPage) => {
    ajax(`請(qǐng)求地址/${currentPage}`)
    .then(renderPage)
}

history

經(jīng)過(guò)幾番搜索，發(fā)現(xiàn)可以用History 接口來(lái)實(shí)現(xiàn)我們想要功能。

history.pushState()

按指定的名稱和URL（如果提供該參數(shù)）將數(shù)據(jù)push進(jìn)會(huì)話歷史棧，數(shù)據(jù)被DOM進(jìn)行不透明處理；你可以指定任何可以被序列化的javascript對(duì)象。具體描述可以參考文檔

通過(guò)history.pushState(state, title, url)可以修改會(huì)話歷史棧，把我們需要保存的數(shù)據(jù)存到state中，這里我們存入一個(gè)對(duì)象，屬性為當(dāng)前頁(yè)數(shù)；title一般沒(méi)什么用，這里傳入null；url會(huì)修改當(dāng)前歷史紀(jì)錄的地址，瀏覽器在調(diào)用pushState()方法后不會(huì)去加載這個(gè)URL

假設(shè)當(dāng)前currentPage為1，當(dāng)前url為www.example.com/search/index

...
const pushState = () => {
    const url = `/search/index/${currentPage}`
    history.push({
        page: currentPage
    }, null, url)
}
const currentChange = (currentPage) => {
    ajax(`請(qǐng)求地址/${currentPage}`)
    .then(res =>{
        pushState(currentPage)
        renderPage()
    })
}
...

現(xiàn)在代碼執(zhí)行順序是：頁(yè)數(shù)改變 => ajax請(qǐng)求 => pushState => renderPage()

在pushState之后當(dāng)前url變成www.example.com/search/index/1

window.onpopstate

現(xiàn)在我們通過(guò)history.pushState()方法把狀態(tài)存入歷史會(huì)話中了，接下來(lái)就要監(jiān)聽(tīng)window.onpopstate事件

參考mdn文檔window.onpopstate

每當(dāng)處于激活狀態(tài)的歷史記錄條目發(fā)生變化時(shí),popstate事件就會(huì)在對(duì)應(yīng)window對(duì)象上觸發(fā).

調(diào)用history.pushState()或者h(yuǎn)istory.replaceState()不會(huì)觸發(fā)popstate事件. popstate事件只會(huì)在瀏覽器某些行為下觸發(fā), 比如點(diǎn)擊后退、前進(jìn)按鈕(或者在JavaScript中調(diào)用history.back()、history.forward()、history.go()方法).

接下來(lái)監(jiān)聽(tīng)這個(gè)事件

window.addEventListener("popstate", (event) => {
	if(event.state !== null){
	    page = event.state.page
	    changeCurrentPage(page) // 修改當(dāng)前頁(yè)數(shù)
	}
})

當(dāng)popstate觸發(fā)時(shí)，會(huì)修改當(dāng)前頁(yè)數(shù)，然后觸發(fā)之前定義的currentChange方法，更新數(shù)據(jù)，渲染頁(yè)面。

問(wèn)題2

到此為止，問(wèn)題1就解決了。

接下來(lái)要解決問(wèn)題二：從詳情頁(yè)返回列表頁(yè)，記住之前的狀態(tài)
這里我用url來(lái)記錄狀態(tài)，之前pushState推入的url就派上用場(chǎng)了。 只要把進(jìn)入頁(yè)面首次請(qǐng)求的地址改成當(dāng)前url就可以了

假設(shè)之前push的url為www.example.com/search/index/5，從詳情頁(yè)返回之后url還會(huì)顯示www.example.com/search/index/5

mounted () {
    ajax(location.href)
}

這樣就完成了。 當(dāng)然如果你的狀態(tài)比較復(fù)雜，可以把數(shù)據(jù)存入本地Storage，添加一些判斷即可

以上就是history保存列表頁(yè)ajax請(qǐng)求的狀態(tài)使用示例詳解的詳細(xì)內(nèi)容，更多關(guān)于history保存列表頁(yè)ajax請(qǐng)求狀態(tài)的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

最新評(píng)論