用户点击后退按钮后未显示动态创建的输入元素

Question

我使用以下代码创建动态输入元素：<div id="add">Add row</div><script>$(document).on('click', '#add', function() {    var number = $('div[id^="row_"]').length + 1;    $('#add').before('<div id="row_'+number+'"><label for="answer_'+number+'">Question #'+number+'</label> <input id="answer_'+number+'" name="answer_'+number+'" type="text"></div>');});</script>如果我发送表单并点击 BACK 按钮，所有其他输入元素都会显示用户的文本，动态创建的输入字段除外。字段本身不显示。我试图通过 jQuery 将用户的文本放入隐藏字段，但在 BACK 按钮后它也消失了。在用户点击 BACK 按钮后，如何向用户显示整个表单的先前状态？解决方案：如果我将用户的文本放入带有 style="display:none" 的 type="text" 元素中，我会在 BACK 按钮之后获得文本，并且可以使用用户的文本重新创建动态字段。感谢大家的建议，希望这能帮助遇到这个问题的其他人。

Answer 1

发布表单后，浏览器会导航到您<form>的action. 当您返回时，它会重新加载您的页面，并且所有脚本的状态都会重置，因为页面已重新加载。

如果要保持该状态，则需要通过 AJAX 发送表单。您也可以使用 jQuery 来做到这一点（请参见此处）。然后你甚至不需要点击后退按钮。

Answer 2

我想也许我在聊天后现在完全理解你的问题了，我希望，无论如何！--

浏览器代码缓存

当您在 Chrome 或浏览器中下载页面时，它会存储在本地浏览器缓存中。但它存储页面的命令，而不是状态。因此，当您返回时，将根据 HTML 和 CSS 命令重新呈现 HTML，并重新执行 JS。我从 Chrome 的官方开发博客 v8.com 找到了一些信息......

当第二次请求 JS 文件时（即热运行），Chrome 会从浏览器缓存中获取该文件，并再次将其交给 V8 进行编译。然而，这一次，编译后的代码被序列化，并作为元数据附加到缓存的脚本文件中。

因此，您会看到，当您点击后退按钮时，它会重新编译并重新运行 JavaScript，但它不会恢复上次运行的 JavaScript 生成的先前元素，或者用户提交的触发该状态的事件。

来源：V8.com：JavaScript 开发人员的代码缓存

后向缓存 (BFCache)/浏览器表单缓存

不要将其与缓存的表单数据混为一谈，这是完全不同的。 Chrome 会自动使用后退按钮缓存您的旧表单数据，但这不是代码缓存功能的一部分。针对该问题查看类似的问题：使用浏览器后退按钮返回时清除表单中的所有字段

谷歌 2019 年 2 月更新：这似乎应该在不久的将来某个时间修复。资料来源：探索 Chrome 的后退/前进缓存。

Answer 3

这是一个解决方案：

我试图通过 jQuery 将用户的文本放入 type="hidden" 元素中，但是在 BACK 按钮之后它已经丢失了，但是如果我将答案放入 style="display:none 的 type="text" 元素中"，我在 BACK 按钮之后有用户的文本，我可以使用用户的文本重新创建动态字段。

感谢大家的建议，希望这能帮助遇到这个问题的其他人。