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

Question

美好的一天!

我正在构建一个移动应用程序。我有 index.html“屏幕 A”，其中 onSubmit 调用 javascript 函数:

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

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

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

问题:我找不到使“后退”按钮从“屏幕 C”到“屏幕 B”正常工作的方法。我可以通过使用 window.history.go(-2) 从“屏幕 B”返回到“屏幕 A”(window.history.length 说 7 但为什么 -2 可以返回 index.html我不知道)。

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

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

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

拜托，有人可以建议一种实现“后退”按钮机制的方法，以便我可以从“屏幕 C”返回到“屏幕 B”吗？我应该使用 cookie 吗？或者有没有办法在历史中保留“屏幕 B”的内容？

添加:

根据要求。我添加了有关“屏幕 B”到 C 转换的更多信息。在“屏幕 B”中，我有移动页面，程序逻辑要么在“屏幕 B”内的那些页面之间切换，要么使新的 Web 服务 RQ 切换到“屏幕 C”。我切换到“屏幕 C”的方式类似于从 index.html 到“屏幕 B”，即，我以编程方式构建 GET 参数，在我的标记类中使用这些参数(它为“屏幕 B”构建 jquery-mobile 内容)我然后使用制作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");

预先感谢您的协助。

维克多。

Answer 1

我想提一下，使用 localStorage 实际上确实有效。根据文档，localStorage 允许至少 5MB。我使用了来自网络服务响应的最大数据测试，数据存储和检索成功:

商店:

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 内容的“后退”按钮功能的技术。

谢谢， 维克多。