Javascript 在使用History.js转到下一页之前加载并保存状态

twitter是如何实现这种功能的？假设我在网页的这一部分

然后，假设我单击了另一个页面（假设Dev Ops Borat）

点击后。我点击后退按钮，然后我注意到我回到了上一页

请注意，我的滚动条的位置仍然与以前相同。因此，在我进入下一页之前，它肯定是在保存浏览器的上一个状态

所以我的问题是。如何使用History.js实现这一点？我想到的是这样的事情

History.Adapter.bind(window, 'statechange', function(e) { // Note: We are using statechange instead of popstate
    var State = History.getState();
    $("body").css("cursor", "default");
    $.get(State.url, function(data) {
        //Get The title of the page
        var newTitle = $(data).filter('title').text();
        //replace the page with the new requested page
        //$('#main-content').html($(data).find('#main-content').html());
        $('#main-content').children().remove();
        $('#main-content').html($(data).find('#main-content').html());
        //Change the  title of the page to requested page title
        document.title = newTitle;

    },"html");

});

---

这似乎工作正常，但是当我单击“上一步”按钮时，上一个网页的上一个状态与我离开时的状态不同。（如上面的示例所示）

不确定我是否完全理解您的要求，但是，如何通过History.pushState存储每个页面的内容，然后从State.data.content检索内容，而不是每次都执行一个新的AJAX请求

因此，将AJAX（$.get）替换为以下内容：

var $main_content = $('#main_content');

History.Adapter.bind(window, 'statechange', function(e) { 
   var State = History.getState();
   $("body").css("cursor", "default");
   $main_content.html(State.data.content);
});

然后将使用AJAX加载的内容添加到State.data.content中

$.ajax({
   url: url
}.done(function(data) { 
   History.pushState({content: data}, null, '/replace/with/dynamic/urlpath');
   $main_content.html(data);
});

---

如果你有javascript函数来改变DOM，比如：show（）hide（），你可以用一个全局函数来更新State.data.content，你每次在DOM中进行更改时都会运行这个全局函数。

大多数浏览器不是都会自动这样做吗（保存滚动位置）？我注意到Twitter上的一件事，即使他们已经加载了过去的tweets（假设您已到达页面底部，然后重新加载以前的推文）然后单击一个新页面，然后再次单击“上一步”，您将看到他们没有再次重新加载所有需要的tweet。这正是我试图做的。这可能吗？您是否研究过是否可以通过将每个AJAX请求的内容传递到data:attribute inside History.pushState来存储/加载这些内容({数据：…？嘿，我很好奇你是否能找到这个问题的正确解决方案？？