如前所述，您将需要使用HTML5历史API。请注意，此API相对较新，因此浏览器支持是一个问题。在撰写本文时，全球约有71%的互联网用户支持它（http://caniuse.com/#feat=history有关浏览器支持信息，请参阅www.example.com）。因此，您需要确保为此提供一个备用解决方案。你可能会想使用旧的#！这是一个在HTML 5历史API被采用之前流行的解决方案。
例如，如果您使用历史API将example.com/#!settings替换为example.com/settings，并且用户将该更好的URL作为书签，那么当他们访问它时，他们的浏览器将向服务器请求/settings（实际上在Web服务器的上下文中并不存在）。因此，您需要确保您的Web服务器具有一些重定向规则（即RewriteEngine），这样它就可以将漂亮的URL重定向到#！版本（然后如果用户的浏览器支持历史API，它可以用漂亮的URL替换它）。
如果你自己不太习惯编程，我建议你使用一个JavaScript库，它可以为你做很多工作。我做了一些快速搜索，发现了以下内容，虽然可能有更好的：https://github.com/browserstate/history.js

基本上，我已经在jsfiddle上创建了一个小的原型，它可以跟踪所有 AJAX 调用访问的url。
还包含来回访问链接的导航。

实际工作原理：

• 我创建了一个名为history的全局数组，它按顺序跟踪所有通过 AJAX 访问的url。
• 此外，还定义了全局index，以在来回导航history数组中的链接时跟踪正在访问的URL。
• 在jsfiddle的底部有History section，它通过捕获链接名称并按访问顺序发布来显示访问链接的顺序。
  JS编码：

$(function () {
var history = [];
var index = 0;
$('.links').on('click', function () {
    $('#history').append($(this).text());
    var address = $(this).attr('data-ref');
    index += 1;
    history[index] = address;

    $('.links').attr('disabled', 'disabled');
    loadExternalPage(address);
    console.log('list:' + history);
});

$('#back').on('click', function () {
    console.log(index);
    index -= 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

$('#forward').on('click', function () {
    console.log(index);
    index += 1;
    console.log(index);
    console.log(history[index]);
    loadExternalPage(history[index]);
});

var loadExternalPage = function (address) {
    console.log(history[index]);
    $('#result-section').load(address, function () {
        console.log('data-loaded');
        $('.links').removeAttr('disabled');
    });
};
});

字符串

现场演示@ JSFiddle：http://jsfiddle.net/dreamweiver/dpwmcu0b/8/

• 注意：此解决方案远非完美，因此不要将其视为最终解决方案，而是将其用作构建基础 *

1.使用浏览器左上角按钮中的后退和前进功能时：
原则上，只要您在浏览器上使用先前访问过的网页的现有存储对象（堆栈），这就没有什么大问题。这个对象是 history 对象，你可以通过右键点击并选择“Inspect”，然后选择“Console”选项卡，然后输入 window.history 并输入，随时查看其中的内容。查看Pro Java For Web Developers（Frisbee）的浏览器对象模型（BOM）部分，了解历史对象的背景。（只有几页，很容易阅读，不要担心。）*只要记住，在这个过程中，您正在存储 * 您移动到的新页面 ，而不是您要离开的旧页面！
有关简单的SPA示例，请查看以下示例-codepen.io/tamjk/pen/NWxWOxL
1.关于URL，history 对象用于将新页面状态加载到历史堆栈中的方法，即pushState（...）具有可选的第三个参数，用于为所存储的每个网页关联虚拟URL。就我个人而言，当我第一次整理BACK & FORWARD函数时，我没有使用虚拟URL，因为浏览器会被它们弄糊涂，我只使用前两个参数就足够整理历史序列了，即。

• 状态对象-一个JSON，它包含足够的数据来重新创建存储的页面。
• 我希望你也可以使用一个虚拟的URL，但我会把它留给学生作为练习，就像他们说的那样。

但是如果你想的话，你可以添加新页面的URL。
在上面的例子中，对于状态对象，我只使用了页面的导航链接和它的内容元素的ID。对于标题，我以编程方式在每次更改页面时更改HTML的页面标题元素。我是在注意到浏览器根据HTML代码中的title元素列出以前的页面后这样做的。不幸的是，这个标题不显示在CodePen上，当您右键单击浏览器的后退和前进按钮，由于CodePen的系统不允许它。但它会显示在你自己的网站上。
重要的是，无论你使用什么方法来存储当前的网页状态，当你使用导航栏链接导航时，当你使用BACK或FORWARD按钮到达它们时，不要将页面状态添加到浏览器历史记录中。否则，您的历史堆栈将有重复的条目返回和删除的条目前进。
在CodePen中，这是通过将addToHistory（..）函数与switchPage（...）函数分离并在其范围之外来实现的。这允许您在正常导航栏导航和浏览器BACK/FORWARD导航中使用switchPage函数。switchPage（...）的第三个参数是一个布尔值，指示页面是否要存储在历史中。
不管怎样，这只是让你开始的东西。