今天在项目中遇到 要实现修改地址栏但是页面不可以刷新的需求
查阅资料发现可以用window.history.pushState(state, title, url)和window.history.replaceState(state, title, url)
三个参数：
state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null或者空字符串。
title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。
url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址，不会检查url是否存在。
两者区别：
pushState()方法是在历史记录中增加一条新的记录，pushState()因为留下记录，所以可以回撤文章来源：https://www.toymoban.com/news/detail-656493.html
replaceState()方法是将当前的历史记录给替换掉，不会在history中留下记录,因为未留下记录，所以无法返回文章来源地址https://www.toymoban.com/news/detail-656493.html
searchParams = `?keyword=${keyword}&pageNum=1&pageSize=10&type=${type}&courseType=${courseType}&subjectId=${subjectId}`
getSearch(searchParams)
function getSearch(keyword) {
history.pushState("", "", "./searchPage.html" + keyword);
...
}到了这里，关于window.history.pushState()和window.history.replaceState()的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[HTML]Web前端开发技术26（HTML5、CSS3、JavaScript ）JavaScript基础——喵喵画网页](https://imgs.yssmx.com/Uploads/2024/02/828994-1.png)
