如何保留 html 内容历史记录以使后退按钮起作用？

Posted 2023-05-09

【中文标题】如何保留 html 内容历史记录以使后退按钮起作用？

【英文标题】：How can I keep html content history to make back button work?

【发布时间】：2014-09-02 07:15:29

【问题描述】：

美好的一天！

我正在构建一个移动应用程序。我有 index.html “screen A”，它 onSubmit 调用 javascript 函数：

$.get(myRemoteURL, function(data) 
document.open();
document.write(data);
document.close();
, "text");

然后用从制作 web 服务 RQ 获得的新内容“屏幕 B”覆盖页面。此内容是 jquery 移动内容，我以编程方式在我的 Java 标记中构建，其中包含移动视图所需的所有“divs”和“page”元素。

然后我创建另一个 web 服务 RQ 并再次重复类似的 javascript 函数调用，用从该 web 服务 RQ 获得的新数据替换新的 jquery 移动内容“屏幕 C”。

问题：我找不到使“返回”按钮从“屏幕 C”到“屏幕 B”正常工作的方法。我有点能够通过使用 window.history.go(-2) 从“屏幕 B”返回到“屏幕 A”（window.history.length 说 7，但为什么恰好 -2 可以返回 index.html我不知道）。

最大的问题是我无法从“屏幕 C”返回到“屏幕 B”。我正在尝试从我替换它的内容中获取我替换的 HTML 内容。我尝试使用 JSON localStorage 将“屏幕 B”的内容存储在一个变量中，这样我就可以将“屏幕 C”的内容替换为“屏幕 B”的存储内容，但这不起作用。我也遇到了错误

"Exception in thread "http-bio-8080-exec-402" java.lang.OutOfMemoryError: PermGen space" 

尝试在 JSON localStorage 中存储“屏幕 B”的内容时 - 从 webservice RQ 和移动内容获取的数据在 1-2MB 范围内。

请问，有人可以提出一种实现“返回”按钮机制的方法，以便我可以从“屏幕 C”返回到“屏幕 B”吗？我应该使用cookies吗？或者有没有办法在历史中保留“屏幕B”的内容？

添加：

根据要求。我添加了有关“屏幕 B”到 C 转换的更多信息。在“屏幕 B”中，我有移动页面，程序逻辑要么在“屏幕 B”内的这些页面之间切换，要么让新的 Web 服务 RQ 切换到“屏幕 C”。我切换到“屏幕 C”的方式类似于从 index.html 到“屏幕 B”，即，我在我的标记类（它为“屏幕 B”构建 jquery-mobile 内容）中以编程方式构建 GET 参数，我然后用于制作 webservice RQ 以获取“屏幕 C”的数据。在“屏幕 B”中是：

<a href="" onClick="switchToScreenC(_hidden_id_value, urlForScreenC)">Select</a>        

我拥有的 _hidden_​​id_value 是隐藏的输入字段，用于存储使 web 服务 RQ 获取“屏幕 C”数据所需的值。

然后是我的javascript：

urlForScreenC = urlForScreenC + "?parameter=" + $("#" + _hidden_id_value).val();

$.get(urlForScreenC, function(data) 
document.open();
document.write(data);
document.close();
, "text");

提前感谢您的帮助。

维克多。

【问题讨论】：

您应该添加更多关于在您的网络服务请求后覆盖页面 B 和 C 的方式的信息

你在构建混合应用吗？

只需使用location = myRemoteURL 而不是首先使用 Ajax。

是的，这是一个混合应用程序。

或者，请参阅developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/…

【参考方案1】：

我想提一下，使用 localStorage 确实有效。根据文档，localStorage 至少允许 5MB。我对来自 web 服务响应的数据进行了最大的测试，并且成功存储和检索了数据：

商店：

localStorage.setItem("screenB", document.documentElement.outerHTML);

检索：

function goBackToScreenB()

document.open();
document.write(localStorage.getItem("screenB"));
document.close();

因此，“屏幕 C”调用 goBackToScreenB() 并且此存储的内容成功显示，好像按下了“返回”按钮。

我还查看了 history.pushState()，正如 developermozilla 网站上的一位评论员所建议的那样，但是 history.pushState() 允许的最大内容大小似乎只允许最多 640K 个字符，他们建议使用 localStorage 作为替代方案.

希望这个解决方案可以帮助其他人作为实现大型 HTML 内容的“后退”按钮功能的技术。

谢谢， 维克多。

【参考方案2】：

试试这个，可能对你有帮助：

 history.forward();