使用history保存列表頁ajax請求的狀態

amuqiao 發布于2019-08-22 13:53 / 3181人閱讀

摘要：問題最近碰到兩個問題從首頁進入列表頁之后，點擊下一頁的時候，使用請求更新數據，然后點擊瀏覽器后退按鈕就直接返回到首頁，實際這里想要的效果是返回列表頁上一頁。沒法記住之前分頁狀態。

問題

最近碰到兩個問題：

從首頁進入列表頁之后，點擊下一頁的時候，使用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，添加一些判斷即可

云服務器 GPU云服務器 js使用ajax異步請求數據 js中使用ajax請求數據 ajax_history ajax的異步請求

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92587.html

vue 模仿今日頭條demo

vue 頭條 demo 寫在前面總結一下寫 demo 過程中遇到的一些問題，方便自己的學習總結！如有錯誤，還請指正！一直想學習使用 vue ，并準備以后在實際項目使用，之前跟著慕課網黃軼老師敲了一下餓了么商品購買頁的demoele效果預覽該 demo 借鑒自 hcy1996-github 這個項目，但內部內容，布局風格，完全不同，只為共同學習，共同交流數據接口直接打開今日...

simpleapples 2019-08-21 12:03 評論0 收藏0
HTML5 history API，創造更好的瀏覽體驗

摘要：而唯一不引發刷新的參數并不會發送到服務器，因此服務器無法獲得狀態。目前建議設置為空字符串。此外請注意，及本身調用時是不觸發事件的。我認為，按照漸進增強的思路，這樣就是最好的了，也就是只使用較少的代碼優化高級瀏覽器的使用體驗。 HTML5 history API有什么用呢？從Ajax翻頁的問題說起請想象你正在看一個視頻下面的評論，在翻到十幾頁的時候，你發現一個寫得稍長，但非常有趣的評...

zgbgx 2019-08-21 10:23 評論0 收藏0
Ajax局部頁面刷新和History API結合的陷阱

摘要：對于那些老網站或者老項目來說全盤改造成并不現實，于是就有了局部頁面刷新這個解決方案。如果不知道局部頁面刷新是何物請看這里，這里和這里。但實際上，第一次后退無法還原的內容陷阱，第二次后退頁面刷新了一切恢復最初的樣子。 ajax在現代網站已經得到非常普遍地應用，主要的好處大家都知道（異步加載數據，不用刷新整個瀏覽器，更小的數據傳輸尺寸）。對于那些老網站或者老項目來說全盤改造成ajax并不現...

JasinYip 2019-08-20 10:14 評論0 收藏0