javascript 保留页面状态以使用浏览器后退按钮重新访问
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9009858/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Preserve page state for revisiting using browser back button
提问by Indigenuity
I have a page that dynamically loads content based on a user pushing a button:
我有一个基于用户按下按钮动态加载内容的页面：
${document).ready(function)
{
$("#myButton").click(function()
{
$("#dynamicDiv").load("www.example.com");
});
}
The dynamic content works fine, I can fetch pages all day long. But after you follow a link to another page, then press the browser back button to come back to the page, the page is completely reset as though no dynamic content had ever been loaded.
动态内容工作正常，我可以整天获取页面。但是在您点击链接到另一个页面后，然后按浏览器后退按钮返回该页面，该页面将完全重置，就好像从未加载过任何动态内容一样。
I swear I've seen different behavior before, but maybe I'm insane. Shouldn't the browser preserve the state of the page, rather than re-rendering it?
我发誓我以前见过不同的行为，但也许我疯了。浏览器不应该保留页面的状态，而不是重新渲染它吗？
EDIT: By the way, I'm using Play! framework, if that has any bearing on this.
编辑：顺便说一下，我正在使用 Play！框架，如果这与此有关。
回答by epignosisx
The browser loads the page as it was first received. Any DOM modifications done via javascript will not be preserved.
浏览器加载第一次收到的页面。任何通过 javascript 完成的 DOM 修改都不会被保留。
If you want to preserve the modifications you will have to do some extra work. After you modify the DOM, update the url hash with an identifier that you can later parse and recreate the modification. Whenever the page is loaded you need to check for the presence of a hash and do the DOM modifications based on the identifier.
如果您想保留修改，您将不得不做一些额外的工作。修改 DOM 后，使用标识符更新 url 哈希，您可以稍后解析并重新创建修改。无论何时加载页面，您都需要检查是否存在散列并根据标识符进行 DOM 修改。
For example if you are displaying user information dynamically. Every time you display one you would change the url hash to something like this: "#/user/john". Whenever the page loads you need to check if the hash exists (window.location.hash), parse it, and load the user information.
例如，如果您正在动态显示用户信息。每次显示一个时，您都会将 url 哈希更改为如下所示：“#/user/john”。每当页面加载时，您需要检查哈希是否存在（window.location.hash），解析它并加载用户信息。
回答by Mathias F
Implementing browser back functionality is hard. It gets easier when you use a plugin like jquery.history.js.
实现浏览器后退功能很困难。当您使用像 jquery.history.js 这样的插件时，它会变得更容易。
回答by Scott A Miller
epignosisx and Malcolm are both right. It's also known as "deep linking". We used the JQuery Address Plugin to deal with this in a recent Play application.
Epignosisx 和 Malcolm 都是对的。它也被称为“深度链接”。我们在最近的 Play 应用程序中使用了 JQuery 地址插件来处理这个问题。
回答by gb2d
A technique I use for this is to serialize state to JSON, store it in the hash string, and then read it back when the page is navigated back to. This has been tested in IE10+, Firefox, Chrome.
我为此使用的一种技术是将状态序列化为 JSON，将其存储在哈希字符串中，然后在导航回页面时将其读回。这已经在 IE10+、Firefox、Chrome 中进行了测试。
Example:
例子：
// 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));
}
