history保存列表页ajax请求的状态使用示例详解（history.history）这都可以？

文章摘要

这篇文章讨论了如何利用JavaScript的`History`接口解决分页页面中的导航问题。作者遇到了两个主要问题： 1. 在列表页分页后，点击“后退”按钮无法返回上一个分页页面，而是直接返回到首页。 2. 从详情页返回列表页时，无法正确记住之前的分页状态。为了解决这些问题，作者使用了`History`接口的`pushState`方法来保存当前的分页状态（如当前页数），并通过监听`window.onpopstate`事件来触发状态更新。具体步骤如下： - 在页面分页变化时，进行异步Ajax请求，并使用`history.pushState`方法将当前分页状态保存到历史记录中。 - 监听`popstate`事件，当状态发生变化时，更新当前页数。 - 在返回列表页时，使用保存的状态（如当前页数）来重定向到正确的页面。这种方法确保了用户在导航时能够正确地返回到之前所在的页面，解决了分页状态记忆的问题。文章还提供了一个完整的示例，说明了如何将保存的状态用于返回路径的构建。

目录问题优化前代码historyhistory.pushState()window.onpopstate问题2

最近碰到两个问题：

从首页进入列表页之后，点击下一页的时候，使用ajax请求更新数据，然后点击浏览器“后退”按钮就直接返回到首页，实际这里想要的效果是返回列表页上一页。在列表页分页为2的页面进入详情页，然后点击“后退”按钮，返回的事列表页分页为1的页面。没法记住之前分页状态。

代码如下，在页数变化的时候，去异步请求数据，渲染页面。

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

经过几番搜索，发现可以用History 接口来实现我们想要功能。

按指定的名称和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

现在我们通过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方法，更新数据，渲染页面。

到此为止，问题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请求状态的资料请关注脚本之家其它相关文章！

您可能感兴趣的文章:通过history解决ajax不支持前进/后退/刷新的问题JavaScript的History API使搜索引擎抓取AJAX内容基于h5的history改善ajax列表请求体验vue?history模式刷新404原因及解决方法vue3中关于路由hash与History的设置Vue中如何把hash模式改为history模式