Javascript AJAX后期浏览器历史记录

我有一个很烦人的问题还没弄明白

我正在使用“单页应用程序范例”开发一个Web系统，但没有任何框架，如angular、主干网等

我们只加载一次页面，几乎所有其他页面都是通过ajax加载的。当用户单击浏览器的“后退”按钮时，问题开始出现。 由于没有重新加载页面，在用户登录系统后，没有更改url，当用户尝试使用浏览器中的“后退”按钮时，他将重定向到登录页面，因为这是他“访问”的最后一个页面

所有内容都是通过ajaxpost加载的（不是很自豪），现在我们必须支持back/foward按钮。我尝试使用HTML5历史API，但没有成功。我能够注册“popstate”回调，并尝试再次模拟帖子。但是页面中有一些字段我必须还原。我不确定是否能找到它，但我需要的是将页面恢复到发送请求之前的状态，如快照

谁能帮我一把吗

---

谢谢！（我很绝望：D）

您可以研究使用片段标识符（URL中#之后的内容）来跟踪您所处的“页面”，这就是一些框架所做的。大多数浏览器都可以监听对它的更改，并且浏览器历史记录可以很好地使用它，因此您可以在它更改时检索值并采取适当的操作。

以下是一个简单的示例：

var state = null;
$(document).ready(function($) {   
//this is my menu... I created a simple menu just for testing :)
    $('nav li').on('click', function(){
        var title = $(this).text().toLowerCase();
        loadPage(title);
        window.history.pushState(title, null, '#'+title);
    });


    window.addEventListener('popstate', function(event) {
        state = event.state;
        console.log("State: "+state);
        if(state != null && state != "null"){
            loadPage(state);
        }
    });
});

function loadPage(page) {
    $("#content").load(page+".html");
}

---

干杯；）

不要再发明轮子了。观察像angular这样的框架。否则，考虑本地存储/历史API。好吧，我同意你的看法。问题是我还不熟悉Angular，我们没有时间学习它。该项目几乎完成了90%，我们需要尽快添加此功能。请看一个类似剑道UI的示例SPA。他们的代码非常简单，并且很好地演示了基础知识。这正是我所需要的。但是浏览器将能够恢复整个页面（甚至那些没有通过ajax更改的部分）？是的，假设您的URL以#page1、#page2、#page3等结尾。如果您听到片段的更改，这可以通过点击后退按钮触发，您检索您所在的“页面”，然后启动相应的AJAX请求（或从缓存的JS对象或其他对象中提取），然后填充页面。这可能需要在应用程序中进行大量的返工，但它应该可以工作。