我正在尝试找出历史 API，但在阅读文档后我几乎什么都不懂。
例如我有以下 AJAX：
$("#hund").click(function(e) {
e.preventDefault();
$(".result").load("hund.html #content", function() {
});
以下浏览器 URL 操作：
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");
这个我明白。点击某物，更改网址。点击返回，把url改回来。
但我想，如果在 AJAX 单击后单击后退按钮，我希望 AJAX 调用被反转。在这种情况下，结果 div 将再次为空，或者如果您单击了几个内容然后单击返回，则要加载之前的内容。
我将如何实现这种效果？
【问题讨论】：
标签： jquery ajax html5-history
保留前几页的内容。例如：
var lastPage = $('.result').children().remove();
$('.result').load(...);
然后，当您想返回时，请执行以下操作：
$('.result').empty().append(lastPage);
至少这是基本原则。在实践中，如果您希望某人能够多次返回，那么您不能只有一个lastPage；你需要做一些更复杂的事情。
一种更复杂的方法是保存一个对象，其中包含所有以前访问过的页面的内容 (cache)。那么你可能有一个函数navigate，看起来像这样：
var cache = {};
var currentPageName = /* something */;
function navigate(newPageName) {
cache[currentPageName] = $('.result').children().remove();
if(Object.prototype.hasOwnProperty.call(cache, newPageName)) {
$('.result').append(cache[newPageName]);
delete cache[newPageName];
}else{
$('.result').load(newPageName + ' #content');
}
currentPageName = newPageName;
history.pushState(newPageName, newPageName, newPageName);
}
那么在onpopstate 中你也可以使用navigate。
【讨论】：
onpopstate 处理程序是使用您传递给 pushState 的 state 参数调用的。
onpopstate。
您需要手动修改浏览器历史记录。有这方面的库。
见What's the best library to do a URL hash/history in JQuery?
【讨论】：