使用浏览器后退按钮时保留页面状态

Question

我有一个页面，根据用户点击按钮动态加载内容：

${document).ready(function)
{
    $("#myButton").click(function()
    {
        $("#dynamicDiv").load("www.example.com");
    });
}

动态内容可以正常工作，我可以一整天获取页面。但是当您跟随链接到另一个页面，然后按浏览器的后退按钮返回到页面时，页面将完全重置，就好像没有加载任何动态内容一样。

我发誓以前看到过不同的行为，但也许是我疯了。浏览器不应该保留页面状态而不是重新呈现吗？

编辑： 顺便说一下，我正在使用Play！框架，如果这与此有关的话。

- Indigenuity

Answer 1

浏览器加载页面时，会按照最初接收到的方式进行。通过javascript进行的任何DOM修改都不会被保留。

如果您想要保留这些修改，就需要做一些额外的工作。在修改DOM之后，使用标识符更新URL哈希，以便稍后解析并重新创建修改。每当页面被加载时，您需要检查哈希的存在，并根据标识符进行DOM修改。

例如，如果您正在动态显示用户信息，每次显示一个用户信息时，您都需要将URL哈希更改为类似于“#/user/john”的内容。每当页面加载时，您需要检查哈希是否存在（window.location.hash），解析它，并加载用户信息。

- epignosisx

---

对于这样一个基本的需求，你会认为它会有一些不同的工作方式。我想知道HTML5是否有什么不同的东西在等着我们... - Indigenuity

Cookies是另一种可能性。您可以在JavaScript中设置会话cookie。 - rustyx

一切都很好，但是如何实际解析和加载“用户”信息呢？ - Marin

Answer 2

实现浏览器的“后退”功能很困难。但如果使用像jquery.history.js这样的插件，就会变得更加容易。

http://tkyk.github.com/jquery-history-plugin/

- Mathias F

Answer 3

我使用的一种技术是将状态序列化为JSON，将其存储在哈希字符串中，然后在页面返回时读取它。这已经在IE10+，Firefox和Chrome中进行了测试。

例如：

// On state change or at least before navigating away from the page, serialize and encode the state
// data you want to retain into the hash string

window.location.hash = encodeURIComponent(JSON.stringify(myData));

// If navigating away using Javascript, be sure to use window.location.href over window.location.replace

window.location.href = '/another-page-url'

....

// On page load (e.g. in an init function), if there is data in the #hash, overwrite initial state data
// by decoding and parsing the JSON string

if (window.location.hash) {

    // Read the hash string omitting the # prefix

    var hashJson = window.location.hash.substring(1);

    // Restore the deserialized data to memory

    myData = JSON.parse(decodeURIComponent(hashJson));
}

- gbro3n

Answer 4

epignosisx和Malcolm都是对的。这也被称为“深度链接”。我们最近在一个Play应用程序中使用了JQuery Address插件来处理这个问题。

http://www.asual.com/jquery/address/

- Scott A Miller