如何在重新加载之间存储页面状态？

Question

我有一个网站通过用户单击按钮加载其内容，然后点击调用javascript函数，通过使用AJAX和jQuery更改其内部html来更新中心<div>元素的内容。 / p>

因此，例如，当访问者想要访问我的联系页面时，他们会点击联系人按钮，并通过从外部文件中提取该内容并使用它来替换div {来将div的内容更新为联系表单。 {1}}。整个页面的实际地址没有变化，因为整个页面没有被重新加载，只是div的innerHTML。

除此之外，我的网站使用PHP，我编写了这样的代码，通过在url中传递变量，可以在页面加载的div中填充各种内容。例如，innerHTML将告诉PHP脚本从外部文件加载主页内容，而index.php?page=home将加载联系表单。这样搜索引擎就可以通过我的站点地图中的这些链接找到每个页面及其内容。

我的问题是，如果访问者点击按钮并将不同的内容加载到div中，然后单击其浏览器的重新加载按钮或按CTRL + R，整个页面将重新加载，而div当然会恢复为其原始内容。

我的问题是，有没有办法在浏览器刷新时加载特定页面？例如，如果访问者已加载页面index.php?page=contact，然后单击联系人按钮并更新div内容，然后按下浏览器的刷新按钮，我可以以某种方式编写将加载index.php?page=home的脚本相反，保留页面和内容的外观？

Answer 1

选项1：location.hash

更容易，但不那么健壮。值得一看，但如果你想存储多个元素的状态，你可能需要选项2 。

Here's a demonstration of the code below.

示例：

function onHashChange() {
    var hash = window.location.hash;
    // Load the appropriate content based on the hash.
}

$(window).on('hashchange', onHashChange);
$(document).on('load', onHashChange);

$('#button').click(function(){
    window.location.hash = "home";
});

这样，您需要做的就是更改按钮更改的哈希并使用hashchange事件处理页面加载。

---

选项2：使用History.js的历史API

实施起来有点困难（但并不多！），但是更加强大。依赖于广泛使用的框架。

另一种，也许更简洁的方法是使用History API。它允许您在不刷新页面的情况下更改window.location，允许您使用JavaScript处理这些更改。

但并非所有浏览器都支持API，但您可以使用History.js，如果需要，可提供location.hash后备。 Here's a demo.

来自History.js的github页面：

  

History.js优雅地支持HTML5历史/状态API   （所有浏览器中的pushState，replaceState，onPopState）。包含   继续支持数据，标题，replaceState。 支持jQuery ，   MooTools和Prototype。对于HTML5浏览器，这意味着您可以   直接修改URL，无需再使用哈希。对于   HTML4浏览器它将恢复使用旧的onhashchange   功能。

History.js示例：

function onStateChange() {
    var state = window.History.getState();
    // Handle state accordingly.

    // Fetch the data passed with pushState.
    var data = state.data;
    var title = state.title;
    var url = state.url;
}

// Check the initial state.
$('document').on('load', onStateChange);

// Listen for state changes.
window.History.Adapter.bind(window, 'statechange', onStateChange);

// Any data you want to be passed with the state change.
var stateObj = { variable : 'value' } 

// Change state using pushState()
window.History.pushState(stateObj, "State name", "/page.html");

大多数浏览器都会忽略州名。第三个参数是添加到URL的位。

Answer 2

几周前，当开发人员想要向页面添加ajax内容并动态更改URL时，我已经为这种情况发布了一个jQuery插件。

该插件是 jQuery动态网址 https://github.com/promatik/jQuery-Dynamic-URL

这里有一个演示：http://promatik.pt/github/dynamic-url/

---

当您加载ajax内容时，您可以将路径推送到网址，例如：

$.pushPath( 0 /*level*/, "contact" )
您的网站立即转为：example.com/contact

或者在您的情况下，您可以使用：
$.pushVar( "page", "contact" )
您的网站立即转为：example.com/?page=contact

此插件还允许您执行此操作：
想象一下，您给我一个链接：example.com/?page=contact

在索引页面中，$.getVars( )将返回：{"page" : "contact"}
因此，通过此信息，您可以根据此查询构建页面。

您可以使用该插件进行更多操作，例如收听事件onPopState（这意味着用户在浏览器中返回或转发，这样您就可以基于此重建页面）只需尝试 demo ...

---

重要信息：此插件适用于除IE9以外的所有现代浏览器，部分工作，您仍然可以访问example.com/?page=contact等网址数据（并根据此查询构建您的网页）但在用户体验期间不动态修改URL。