现在我们点击图片，URL和Ajax请求的内容会被自动更新，但是当我们点击后退按钮时并不会回退到之前选中的演员图片。这里我们还需要在用户点击后退和前进按钮时使用另外一个Ajax请求来更新内容，并再一次使用pushState方法来更新页面的URL。
我们使用pushState方法中的第一个参数（其中的state）来保存状态信息：
history.pushState(data, null, url);
上面代码中的data参数在popstate事件触发时可以被获取到。当浏览器的后退和前进按钮被点击时会触发popstate事件。
window.addEventListener('popstate', function(e) { // e.state表示上一个被点击的图片的data-attribute });
我们可以通过该参数传递一些我们需要的信息，例如在该示例中我们将之前选中的捉鬼敢死队的演员作为参数传递给requestContent方法，在该方法中，我们使用jQuery的load方法进行一次Ajax请求。
function requestContent(file) { $('.content').load(file + ' .content'); } window.addEventListener('popstate', function(e) { var character = e.state; if (character == null) { removeCurrentClass(); textWrapper.innerHTML = " "; content.innerHTML = " "; document.title = defaultTitle; } else { updateText(character); requestContent(character + ".html"); addCurrentClass(character); document.title = "Ghostbuster | " + character; } });
如果用户点击了演员Ray的图片，event listener会被触发，然后在pushState事件中保存图片的data属性的值。当用户点击另外一个图片，并点击了浏览器的后退按钮，此时popstate事件会被触发，从而重新加载ray.html页面。
这意味着什么呢？当我们点击一个演员的图片然后将被更改的URL分享出去，用户访问这个URL时对应的HTML文件会被自动加载进来。这会带来一些更好的用户体验，并保证了URL和页面内容的一致性从而减少了因此而带给用户的一些困惑。
上面的示例只是简单地通过jQuery来动态加载内容，我们当然也可以在pushState方法中传递一些更加复杂的对象。不过这个例子已经能足够说明问题并帮助我们开始学习如何使用History API的功能。我们先要学会走，然后才能跑。
下一步如果我们想大范围地使用这种技术，我们应该考虑使用一些专有的工具，例如pjax。 它是一个jQuery的插件，使用它可以大大提高我们同时使用Ajax和pushState方法进行开发的速度，不过它只支持那些使用History API接口的现代浏览器。
History JS可以兼容旧浏览器，对于不支持History API接口的浏览器，它依然使用旧的URL hash的方式来实现同样的功能。
有关URLs这里我特别引用了Kyle Neath有关URLs的说明：
URLs是一个通用的概念，它可以工作在Firefox, Chrome, Safari, Internet Explorer, curl, wget，甚至在你的iPhone, Android以及便签纸上。它是web中的一个通用的语法。不要认为这是理所当然的。任何一个稍微懂点技术的用户都可以浏览你的应用的90%以上的部分而不用去刻意记住那些URL的结构。要实现这样的效果，你需要考虑URLs的实用性。这意味着不论你想要进行什么样的hacks或性能优化，作为web开发人员，你应该注重URL。而随着HTML5 History API的帮助，我们可以轻松地解决诸如上述示例中的一些问题。
常见问题ChromeSafariFirefoxOperaIEAndroidiOS
31+ 7.1+ 34+ 11.50+ 10+ 4.3+ 7.1+
原文地址：https://css-tricks.com/using-the-html5-history-api/
相关文章
精彩导读
热门资讯
关注我们
