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

Question

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

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

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

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

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

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 的 History API

实现起来有点困难(但不是太难!)，但更加强大。依赖于广泛使用的框架。

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

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

来自 History.js 的 github 页面:

History.js gracefully supports the HTML5 History/State APIs (pushState, replaceState, onPopState) in all browsers. Including continued support for data, titles, replaceState. Supports jQuery, MooTools and Prototype. For HTML5 browsers this means that you can modify the URL directly, without needing to use hashes anymore. For HTML4 browsers it will revert back to using the old onhashchange functionality.

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 的位。