HTML5 history新特性pushState、replaceState

1. pushState使用pushStata方法可以向当前浏览器历史记录栈中添加一条新纪录。在点击某个链接后想要动态改变页面URL地址，就能够改变当前页面的URL地址了。

近年来，随着互联网技术的飞速发展和用户需求的不断提升，前端页面跳转已成为了每个网站必备的功能之一。而在这方面，HTML5 history新增加了两个非常实用的API——pushState和replaceState。

那么这两个API到底是什么呢？它们又有哪些优点呢？下面就让我们一起来探究一下吧！

首先，我们需要明确一个概念——浏览器历史记录。简单来说，当你在浏览器中打开一个网页时，浏览器会将该网页信息存储在一个历史记录列表中，并且可以通过“后退”、“前进”按钮进行导航操作。

而pushState和replaceState正是针对这样的历史记录进行操作的API。具体地说：

1. pushState

使用pushStata方法可以向当前浏览器历史记录栈中添加一条新纪录。其语法如下：

```javascript

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

```

其中stateObj表示要保存到history.state对象中的状态数据；title表示标题（目前大多数浏览器都无视此参数）；url表示URL地址。

例如，在点击某个链接后想要动态改变页面URL地址，可以使用如下代码：

window.history.pushState(null, null, '/new-url');

这样，在不刷新页面的情况下，就能够改变当前页面的URL地址了。

2. replaceState

与pushState类似，replaceStata方法也可以向浏览器历史记录栈中添加一条新纪录。但是与pushState不同之处在于，replaceStata会将当前浏览器历史记录栈顶的状态替换为新状态。其语法如下：

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

同样地，stateObj表示要保存到history.state对象中的状态数据；title表示标题（目前大多数浏览器都无视此参数）；url表示URL地址。

例如，在某个操作后需要跳转到一个新页面，并且希望该新页面没有留下原来那个旧页面的历史记录时，就可以使用replaceStata方法：

window.history.replaceState(null, null, '/new-page');

这样，在跳转后用户点击“后退”按钮时就直接回到上一个非替换式导航页而不是回到被替换掉的那个页。

以上两种API使得我们完全可以通过JavaScript动态修改URL而无需进行实际请求和响应操作从而达到前端路由功能。同时它们还有以下优点：

1. 使得我们能够更好地控制网站或者应用的状态。

2. 在Ajax和HTML5历史API技术结合下，可以实现更好的前端路由效果，从而提升用户体验。

3. 可以避免页面刷新或者跳转操作带来的不必要开销。例如，在某些单页应用中，每次点击链接都需要重新加载整个页面显然是不可取的。

总之，HTML5 history新增加的pushState和replaceState API为我们提供了更多控制浏览器历史记录栈、改变URL地址等方面功能。它们在前端路由方面具有很大潜力，并且能够极大地提升网站或者应用程序性能和用户体验。因此，在今后开发过程中将会越来越广泛使用这两个API！