問題
最近碰到兩個問題：
- 從首頁進入列表頁之后，點擊下一頁的時候，使用ajax請求更新數據， 然后點擊瀏覽器“后退”按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。
- 在列表頁分頁為2的頁面進入詳情頁，然后點擊“后退”按鈕，返回的事列表頁分頁為1的頁面。沒法記住之前分頁狀態。
優化前代碼
代碼如下，在頁數變化的時候，去異步請求數據，渲染頁面。
const currentchange = (currentpage) => {
ajax(`請求地址/${currentpage}`)
.then(renderpage)
}
history
經過幾番搜索，發現可以用history 接口來實現我們想要功能。
history.pushstate()
按指定的名稱和url（如果提供該參數）將數據push進會話歷史棧，數據被dom進行不透明處理；你可以指定任何可以被序列化的javascript對象。具體描述可以參考文檔
通過history.pushstate(state, title, url)可以修改會話歷史棧，把我們需要保存的數據存到state中，這里我們存入一個對象，屬性為當前頁數；title一般沒什么用，這里傳入null；url會修改當前歷史紀錄的地址，瀏覽器在調用pushstate()方法后不會去加載這個url
假設當前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()
})
}
...
現在代碼執行順序是：頁數改變 => ajax請求 => pushstate => renderpage()
在pushstate之后當前url變成www.example.com/search/index/1
window.onpopstate
現在我們通過history.pushstate()方法把狀態存入歷史會話中了，接下來就要監聽window.onpopstate事件
參考mdn文檔window.onpopstate
每當處于激活狀態的歷史記錄條目發生變化時,popstate事件就會在對應window對象上觸發.
調用history.pushstate()或者history.replacestate()不會觸發popstate事件. popstate事件只會在瀏覽器某些行為下觸發, 比如點擊后退、前進按鈕(或者在javascript中調用history.back()、history.forward()、history.go()方法).
接下來監聽這個事件
window.addeventlistener("popstate", (event) => {
if(event.state !== null){
page = event.state.page
changecurrentpage(page) // 修改當前頁數
}
})
當popstate觸發時，會修改當前頁數，然后觸發之前定義的currentchange方法，更新數據，渲染頁面。
問題2
到此為止，問題1就解決了。
接下來要解決問題二：從詳情頁返回列表頁，記住之前的狀態
這里我用url來記錄狀態，之前pushstate推入的url就派上用場了。 只要把進入頁面首次請求的地址改成當前url就可以了
假設之前push的url為www.example.com/search/index/5，從詳情頁返回之后url還會顯示www.example.com/search/index/5
mounted () {
ajax(location.href)
}
這樣就完成了。 當然如果你的狀態比較復雜，可以把數據存入本地storage，添加一些判斷即可
以上就是history保存列表頁ajax請求的狀態使用示例詳解的詳細內容，更多關于history保存列表頁ajax請求狀態的資料請關注碩編程其它相關文章！
學習AJAX