window.history.pushState()和window.history.replaceState()

今天在项目中遇到 要实现修改地址栏但是页面不可以刷新的需求

查阅资料发现可以用window.history.pushState(state, title, url)和window.history.replaceState(state, title, url)

三个参数：

state：一个与添加的记录相关联的状态对象，主要用于popstate事件。该事件触发时，该对象会传入回调函数。也就是说，浏览器会将这个对象序列化以后保留在本地，重新载入这个页面的时候，可以拿到这个对象。如果不需要这个对象，此处可以填null或者空字符串。

title：新页面的标题。但是，现在所有浏览器都忽视这个参数，所以这里可以填空字符串。

url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址，不会检查url是否存在。

两者区别：

pushState()方法是在历史记录中增加一条新的记录，pushState()因为留下记录，所以可以回撤

replaceState()方法是将当前的历史记录给替换掉，不会在history中留下记录,因为未留下记录，所以无法返回

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()分享到此就结束了，感谢您的阅读。