HTML5 History API提供了一种功能，能让开发人员在不刷新整个页面的情况下修改站点的URL。这个功能很有用，例如通过一段JavaScript代码局部加载页面的内容，你希望通过改变当前页面的URL来反应出页面内容的变化，这时该功能可以派上用场。

　　举个例子，当用户从首页进入帮助页面时，我们通过Ajax来加载帮助页面的内容。然后这个用户又转到产品页面，我们需要再一次通过Ajax请求来替换页面的内容。当用户想分享页面的URL时，通过History API，我们可以改变页面的URL来反应内容的修改，这样不管是用户分享还是保存的URL都能和页面的内容对应起来。

基本知识

　　要查看这个API提供了哪些功能非常简单，打开浏览器的Developer Tools工具面板，然后在console中输入history。如果你的浏览器支持History API，你将会看到这个对象下面附带了很多方法。

　　注意其中的pushState和replaceState这两个方法。我们可以在console中进行一些简单的测试，来看看当我们使用这两个方法时URL会发生什么变化。稍后我们将分析这两个方法中的所有参数，现在我们只需要关注最后一个参数：

history.replaceState(null, null, 'hello');

　　上面代码中的replaceState方法改变了当前页面的URL，在后面添加了一个'/hello'。不过并没有发出任何request请求，当前窗口仍然停留在之前的页面。不过这里有个问题，当你点击浏览器的后退按钮时，页面并不会回退到我们通过replaceState方法修改之前的那个URL，而是直接回退到了上一个页面（即我们进入到这个页面之前的那个页面）。这是因为replaceState方法不会修改浏览器的history，它只是简单地替换了地址栏中的URL。

　　要解决这个问题我们需要使用pushState方法：

history.pushState(null, null, 'hello');

　　现在再点击浏览器的后退按钮，你会发现它和你预想的效果一样。因为pushState方法将我们传给它的URL添加到浏览器的history中，从而改变了浏览器的history。假如我们将另外一个完整的站点URL传递给它会发生什么情况呢？例如我们在baidu.com的首页进行测试，然后在console中输入下面的内容。

history.pushState(null, null, 'https://twitter.com/hello');

　　浏览器会报错。因为传递给pushState方法的URl必须和当前页面的URL属于同一个源（即不能跨域），否则会有很大的安全漏洞，开发人员可能会借用该功能来欺骗用户，让他们觉得自己是在访问一个完全不同的站点，而事实并非如此。

　　来看看传递给pushState方法的所有参数：

history.pushState([data], [title], [url]);

简单回顾一下

　　这些History API最主要的功能就是不重新加载页面。以往我们只能通过改变window.location的值来修改当前页面的URL，不过这会导致整个页面被重新加载。如果你修改的只是URL中的hash，则不会导致页面被刷新。 

　　使用旧的hashbang方法可以改变页面的URL而不刷新页面。著名的Twitter就是使用的该方法，不过也广受诟病，毕竟hash在location中并不被作为一个真正的资源来对待。

　　作为History API的早期支持者，Twitter后来抛弃了传统的hashbang方法。在2012年，Twitter的团队介绍了他们的新方法，并列出了其中的一些问题同时还详细地介绍了各浏览器应该如何实现该规范。

一个使用pushState和Ajax的例子

https://css-tricks.com/examples/State/

　　在该示例中，我们希望用户通过我们的网站找到电影捉鬼敢死队（一部美国电影）中的演员。当用户选择一个图片时，我们需要在下方显示该演员对应的文字描述，同时给该图片一个被选中的效果。当点击后退按钮时，页面应该切换到上一个被选中的图片状态，同时图片下方的文字也要一并切换。当点击前进按钮时也一样。

　　这里有一个效果图：

　　这个示例的HTML代码非常简单：div.gallery中包含了所有的链接，每个链接里有一个图片。接下来我们放置了一个空的div.content，用来存放当演员图片被点击时显示在下放的文字。

Ghostbusters

　　如果没有JavaScript该页面仍然可以正常工作，点击图片可以跳转到对应的页面，然后点击后退按钮也可以回到之前的页面。这是为了考虑页面的可访问行和优雅降级。

　　接下来我们要添加JavaScript代码了。我们通过event propagation给div.gallery元素中的每一个link添加一个事件处理程序，像这样：

var container = document.querySelector('.gallery'); container.addEventListener('click', function(e) { if (e.target != e.currentTarget) { e.preventDefault(); // e.target is the image inside the link we just clicked. } e.stopPropagation(); }, false);

　　在if语句中，我们获取到被选中图片的data-name属性的值，然后将'.html'添加到后面拼成一个要访问的页面地址，并将其作为第三个参数传递给pushState方法（不过在真实的例子中我们可能会在Ajax请求成功之后才会去修改URL）。

var data = e.target.getAttribute('data-name'), url = data + ".html"; history.pushState(null, null, url); // 此处更改当前的classes样式 // 然后使用data变量的值更新 // 并通过Ajax请求.content元素的内容 // 最后再更新当前文档的title

（当然，此处我们也可以直接使用link的href属性的值）

　　我将真实代码中的内容都替换成注释了，这样我们可以只关注pushState方法的使用。