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

发布时间 2023-09-18 18:57:01作者: 李云蹊

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

查阅资料发现可以用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);
    ...
}