history保存列表頁ajax請求的狀態(tài)使用示例詳解

更新時間：2022年12月14日 10:00:07 作者：魚露

這篇文章主要為大家介紹了history保存列表頁ajax請求的狀態(tài)使用示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

問題

最近碰到兩個問題：

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

優(yōu)化前代碼

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

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

history

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

history.pushState()

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

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

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

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

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

在pushState之后當前url變成www.example.com/search/index/1

window.onpopstate

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

參考mdn文檔window.onpopstate

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

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

接下來監(jiān)聽這個事件

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

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