html5 history api

定义
是一种切换浏览器显示页面url的api

作用
该api可以通过脚本语言来管理浏览器的历史记录，不刷新页面的情况下动态、显示改变浏览器url，动态修改页面上所显示资源。

HTML4中的History API

首先讲一下HTML4中的History API中的属性与方法。
属性：length 历史的项数。javascript 所能管到的历史被限制在用浏览器的“前进”“后退”键可以去到的范围。本属性返回的是“前进”和“后退”两个按键之下包含的地址数的和。
方法：

• back() 后退，跟按下“后退”键是等效的。
• forward() 前进，跟按下“前进”键是等效的。
• go()，跳转

pushState 方法

window.history.pushState(null, null, "?id=1");

接收三个参数，按顺序分别为：

• 一个对象或者字符串，用于描述新记录的一些特性。这个参数会被一并添加到历史记录中，以供以后使用。这个参数是开发者根据自己的需要自由给出的。
• 一个字符串，代表新页面的标题。当前基本上所有浏览器都会忽略这个参数。
• 一个字符串，代表新页面的相对地址，可以接受hash值。

popstate 事件

当用户点击浏览器的「前进」、「后退」按钮时，就会触发popstate事件。你可以监听这一事件，从而作出反应。

window.addEventListener("popstate", function(e) {
    var state = e.state;
    // do something...
});

replaceState 方法

不添加一个新记录，而是替换当前的记录（比如对网站的 landing page），则可以使用replaceState方法。这个方法和pushState的参数完全一样。

应用场景

history api与ajax经常一起使用，动态改变url，无刷新改变页面内容。
ajax不足

• 无法使用浏览器的前进、后退来切换前后数据。
• 单纯地使用AJAX不利于搜索引擎优化。