history新特性pushState、replaceState

时间:2024-03-02 10:57:09

history,就是历史记录,h5的新特性是加入了pushState与replaceState,我的理解是改变location的hash值做到无刷新页面的路由跳转,并且携带了state的相关状态信息。

先对history先作一个简要说明。

history.back()就是回退;这个方法会像用户点击了浏览器工具栏上的返回键一样。
history.forward()是前进一页;
history.go(n)根据n的值来浏览器来处理前进一页还是后退一页,当n=0时,此时是刷新页面;

此时再说一下popstate方法;MDN的概要是这么说的:

popstate窗口上事件的事件处理程序。

popstate每次活动历史记录条目在同一文档的两个历史记录条目之间改变时,将事件分派到窗口。如果被激活的历史记录条目是通过调用创建的,
history.pushState()或者被调用影响history.replaceState(),
则popstate事件的state属性包含历史条目的状态对象的副本。

 简单理解就是:

pushState,replaceState都不会触发popstate的方法,仅当用户在相同文档的两个历史条目之间导航时才触发事件。如果当下有多个历史记录,back(),go(n)触发了路由哈希的改变,就会触发该事件。

window.onpopstate = function(event) {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
};

我们来打开页面看下history

发现这个时候history的length是 1,state是null;下面我们来使用一下pushState,

history.pushState({page: 1}, "title 1", "?page=1");

此时的history变成这样

我们发现state中有了page的值,就是我们pushState传入的状态值,并且length+1了;

然后我们再pushState一次效果是这样,说明每次pushState会改变state的值,并且会让history的栈里面多推入一个。额,也不知道形容的对不对,我猜大家应该懂我想表达的意思。

下面说一下replaceState,其实跟pushState差不多,只是replaceState()修改当前历史记录条目,而不是创建一个新的。

history.replaceState({page: 4}, "title 4", "?page=4");

 

可以看到length没有改变,只是修改了history的state的page值。

总结:pushState也就是往history里放一个状态值,并且创建一个新的历史记录;replaceState修改history的状态值,不创建新的历史记录。popstate只在历史记录发生哈希值改变的情况下触发。

 本文是基于如下链接做的自我解读,如若理解有误,还请指出。大家共同学习进步。

链接:https://developer.mozilla.org/en-US/docs/Web/API/History_API