php如何实现跨页面存储、,php - 如何存储两次重装之间的页面状态？

我有一个网站，该网站通过用户单击按钮来加载其内容，然后这些点击会调用javascript函数，该函数通过使用AJAX和jQuery更改其内部html来仅更新中央

元素的内容。

因此，例如，当访问者想要转到我的联系页面时，他们单击联系按钮，然后通过从外部文件中提取该内容并将其替换为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的脚本，从而保留页面和内容的外观？

最佳答案

选项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优雅地支持HTML5历史记录/状态API

(pushState，replaceState，onPopState)在所有浏览器中。包含

持续支持数据，标题，replaceState。支持jQuery，

MooTools和原型。对于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的位。