在后退按钮上保留动态更改的 HTML
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16431164/
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 dynamically changed HTML on back button
提问by Madd0g
It's amazing, I constantly see this working in other sites but never in sites that I'm working on.
太神奇了，我经常看到它在其他网站上工作，但从来没有在我正在工作的网站上工作。
I'm bringing in new content with ajax, I know about history.js and the History API, I do not want to change the URL, just have the browser cache the new HTML content so when a user leaves the page and comes back using the back button, it still has the updated HTML.
我正在使用 ajax 引入新内容，我了解 history.js 和 History API，我不想更改 URL，只需让浏览器缓存新的 HTML 内容，以便当用户离开页面并返回时使用后退按钮，它仍然具有更新的 HTML。
I see this working all the time in other sites without URL changes or using the hash #.
Is there a trick to get it to work or is it randomly decided by the browser?
If I don't want to use the URL to have this information, is there an easy alternative?
我看到这在其他站点中一直有效，无需更改 URL 或使用哈希 #。
有什么技巧可以让它工作还是由浏览器随机决定？
如果我不想使用 URL 来获取此信息，是否有简单的替代方法？
采纳答案by Groover
For about a decade and half now, I have been using two tricks that I once discovered by painful trial and error: Input field values - especially 'hidden' ones - are preserved in the browser's history along with the URL - AND - the onLoad event is called when returning to the page by the back (or forward) buttons.
大约十年半以来，我一直在使用我曾经通过痛苦的反复试验发现的两个技巧：输入字段值 - 特别是“隐藏”的值 - 与 URL 一起保存在浏览器的历史记录中 - 以及 - onLoad 事件通过后退（或前进）按钮返回页面时调用。
This means that you can store as much 'state' as you like - in hidden fields (remember to put them in a form), and then 'redo' the changes on 'onLoad'. I usually make the 'render' part a separate function... In other words, at the time that the dynamicness is occurring, I first write to the hidden fields - then call the render function. Then I gather together all the various render functions for the various bits of dynamicness and call them from the onLoad.
这意味着您可以根据需要存储尽可能多的“状态” - 在隐藏字段中（记住将它们放在表单中），然后在“onLoad”上“重做”更改。我通常将“渲染”部分作为一个单独的函数......换句话说，在动态发生时，我首先写入隐藏字段 - 然后调用渲染函数。然后我将所有不同的渲染函数聚集在一起，用于各种动态性，并从 onLoad 调用它们。
I would stress that I have never gone hunting for this in any manuals - so cannot offer any assurances - but I have been using it reliably for a good while (since Netscape!!!) It works with 'many' browsers (all the IEs, chrome, FF - but as for the others, I've never tried.)
我要强调的是，我从来没有在任何手册中寻找过这个 - 所以不能提供任何保证 - 但我一直在可靠地使用它（从 Netscape 开始！！！）它适用于“许多”浏览器（所有 IE , chrome, FF - 但至于其他，我从未尝试过。）
If anyone has a more 'correct' - and less tedious - way, I for one, will be very glad to hear about it. But this does seem to do the trick.
如果有人有一种更“正确”——而且不那么乏味——的方式，我会很高兴听到这个消息。但这似乎确实可以解决问题。
回答by honestbleeps
Author of RES here, found your question in /r/javascript
RES 的作者在这里，在 /r/javascript 中找到了您的问题
Apparently, Firefox recently added functionality to do this on its own, but there's no "good" way to do this when the browser doesn't do it for you.
显然，Firefox 最近添加了自己执行此操作的功能，但是当浏览器不为您执行此操作时，没有“好”的方法可以执行此操作。
What RES used to do is add a #page=n marker where n was your page number. That way, on pageload, RES knows you must've come from the back button if there's already a location.hash -- unfortunately, this particular behavior borked up ctrl-f find in both Firefox and Chrome when a find caused you to scroll to another page (page = n+1), because a hashchange would close the find dialog which annoyed users...
RES 过去所做的是添加一个#page=n 标记，其中n 是您的页码。这样，在页面加载时，RES 知道如果已经有一个 location.hash，那么你一定来自后退按钮——不幸的是，当一个 find 导致你滚动到另一个页面（页面 = n+1），因为 hashchange 会关闭惹恼用户的查找对话框......
So now RES does some ugly and imperfect gymnastics to guess whether or not you arrived at the page via the back button. Any time it loads a new page, it saves that number in sessionStorage (like localStorage, but local to the tab), and upon showing up via the back button it fires off a request for that page number.
所以现在RES做了一些丑陋和不完美的体操来猜测你是否通过后退按钮到达了页面。每当它加载一个新页面时，它都会将该编号保存在 sessionStorage 中（类似于 localStorage，但位于选项卡本地），并在通过后退按钮显示时触发对该页码的请求。
However: recently I tested in FF and Chrome and it seems that hash changes no longer "cancel" the ctrl-f find dialog, so my suggestion would be that you use that. Upon pageload, if there's a hash present, load the relevant data determined by that hash.
但是：最近我在 FF 和 Chrome 中进行了测试，似乎哈希更改不再“取消”ctrl-f 查找对话框，因此我的建议是您使用它。在页面加载时，如果存在散列，则加载由该散列确定的相关数据。
You can, if you want to get really crazy, store the actual HTML content in localStorage and reload it on pageload via back button as well. This might not be the most efficient way of doing things, and would almost certainly cause conflicts with javascript that relies on the DOM, though, so tread with caution!
如果您想变得非常疯狂，您可以将实际的 HTML 内容存储在 localStorage 中，并通过后退按钮在页面加载时重新加载它。这可能不是最有效的做事方式，而且几乎肯定会导致与依赖 DOM 的 javascript 发生冲突，因此请谨慎行事！
The "best" solution really depends on what exactly your site is doing / what that content looks / behaves like.
“最佳”解决方案实际上取决于您的网站究竟在做什么/该内容的外观/行为是什么样的。
回答by Adib Aroui
You can achieve your goal using History.js like this:
你可以像这样使用 History.js 实现你的目标：
function manageHistory(data){
var History = window.History;
if ( !History.enabled ) { return false; }
History.replaceState({myData: data}, null);
}
$('select.select').change(function(e) { // I am using select tag here to give an example of an HTML action triggerer
e.preventDefault();
// get data from your select tag
manageHistory( data)
});
History.Adapter.bind(window, 'statechange', function() {
var State = History.getState();
// Launch the ajax call and update DOM using State.data.myData
});
According documentation about History on Mozilla site, the PushState third parameter is:
根据 Mozilla 站点上关于 History 的文档，PushState 第三个参数是：
URL — ....... This parameter is optional; if it isn't specified, it's set to the document's current URL.
URL——....... 该参数是可选的；如果未指定，则将其设置为文档的当前 URL。
回答by 1nfiniti
Local storage is one way, another way is server side persistence.
本地存储是一种方式，另一种方式是服务器端持久化。
When the HTML is edited / created / some property is changed on the client side, you need to sync the state change of your page with webstorage or a database via a restful api (or something comparable).
当在客户端编辑/创建 HTML 时/更改某些属性时，您需要通过一个 RESTful api（或类似的东西）将页面的状态更改与 webstorage 或数据库同步。
When you return to the page - the page can retrieve stored info from local storage... If you're using server-side persistence, you'll need to use it in conjunction with a session cookie to retrieve the user's state changes - which can then be loaded from the server.
当您返回页面时 - 该页面可以从本地存储中检索存储的信息...如果您使用服务器端持久性，则需要将其与会话 cookie 结合使用以检索用户的状态更改 - 其中然后可以从服务器加载。
回答by el vis
I think that reason can be that other webpages uses some back-end servers that provide session.
我认为这个原因可能是其他网页使用了一些提供会话的后端服务器。
If you are building static html/js page there is no such session and page just reloads.
如果您正在构建静态 html/js 页面，则没有此类会话，页面只会重新加载。
You can use cookies to achieve what you want.
您可以使用 cookie 来实现您想要的。
回答by Terafor
I would recommend you to use cookies.
我建议您使用 cookie。
Although HTML5 offers Webstorage, with it values can be stored in browser. There are also some JS libs handling HTML5 Webstorage.
尽管 HTML5 提供了Webstorage，但它的值可以存储在浏览器中。还有一些处理 HTML5 Webstorage 的 JS 库。
Note: there are differences between sizes of data each browser can store. You can find more about it here.
注意：每个浏览器可以存储的数据大小存在差异。您可以在此处找到更多相关信息。
Note2: there were also some issues with hacking the user disk space, so you can expect that policies about using webstorage will be updated.(http://feross.org/fill-disk/)
注2：黑客用户磁盘空间也存在一些问题，因此您可以预期有关使用网络存储的政策将更新。（http://feross.org/fill-disk/）
