HTML5 history新特性pushState、replaceState及两者的区别

HTML5中引入的history API，包括pushState、replaceState方法的新特性，允许JavaScript程序修改浏览器的历史记录。在介绍这两个新特性的区别之前，我们先来了解一下它们的定义以及常见的使用场景。

HTML5中引入的history API，包括pushState、replaceState方法的新特性，允许JavaScript程序修改浏览器的历史记录。在介绍这两个新特性的区别之前，我们先来了解一下它们的定义以及常见的使用场景。

pushState方法

pushState方法可以往浏览器历史记录里面插入一条新的记录，并在页面URL上添加指定的参数，而不需要刷新页面。这个特性是用来改变地址栏而不需要导致页面刷新，同时为页面提供一个对应的“回退”URL。其语法如下：

window.history.pushState(stateObj, title, url);

其中，stateObj是一个对象，表示新的历史记录的状态；title是新历史记录的标题，但是在实际应用中是没有用处的，通常传入null；url表示新历史记录的URL地址。例子如下：

// 将地址栏中的URL改为/history
history.pushState(null, null, '/history');

replaceState方法

replaceState方法与pushState方法类似，也可以向浏览器历史记录中插入一条新的记录。不同的是，这个新的记录会替换当前的记录，并在地址栏上也会改变对应的参数（无论是查询参数还是hash）；而不会像pushState方法那样添加新的记录。其语法如下：

window.history.replaceState(stateObj, title, url)

同样的，stateObj和title都是和pushState方法的参数相同。例子如下：

// 将地址栏中的hash改为#about
history.replaceState(null, null, '#about');

两者的区别

综上所述，pushState和replaceState两者的不同主要在于：

• pushState是添加新记录；replaceState是替换当前记录。
• pushState会增加一条新的记录至历史记录栈，而replaceState不会。
• pushState改变url地址创建新的历史记录；replaceState改变url地址但不创建新的历史记录。

举个例子，考虑一个网站Home、About和News三个页面。用户从Home页面进入About页面后，通过使用pushState改变url，可以让浏览器知道用户当前在访问About页面，同时点击浏览器的后退按钮可以返回到Home页面。而如果使用replaceState改变url，用户点击浏览器的后退按钮返回到Home页面后，无法再返回到About页面。

// pushState添加新的历史记录
history.pushState(null, null, '/about')

// replaceState替换当前的历史记录，不会添加新记录
history.replaceState(null, null, '/news')

结语

HTML5 history API提供的pushState和replaceState可以很好地操作浏览器历史记录，并且不需要刷新页面，从而给开发者提供更加灵活的操作方式。同时，它们也需要被谨慎使用，因为它们可能会影响用户体验，并且需要考虑如何确保访问的页面都是可访问的，以及改变页面状态之后如何正确处理状态的变化。