自动完成/恢复在导航时动态创建的输入表单字段

Question

假设我在 HTML 页面上有一个 <input> 元素。当我填写一个值，向前导航到另一个页面并返回时，通常会恢复该值：

1) 在 Firefox 中，由于 BFCache：https://developer.mozilla.org/en-US/docs/Working_with_BFCache，正在恢复整个页面状态。 （这意味着甚至正在恢复正在运行的脚本的状态。）

2) 在 Chrome 中，快速页面缓存似乎不起作用（因此页面被重置为原始状态），但输入字段的值正在保留。

现在，如果我通过脚本动态添加 <input> 字段，在 Firefox 中该值仍会恢复（因为所有内容都在恢复中）。

然而，在 Chrome 中，用于创建 <input> 字段的 Javascript 必须再次运行，因此该输入字段在引擎中显示为全新的，这意味着不会恢复任何值。

所以我的问题是：如何使用动态生成的<input>s 来实现 Chrome 的功能 2）（或者如何给 Chrome 一个关于输入字段身份的提示）。

（我对所有这些感兴趣的一个原因是建议的自定义元素：https://dvcs.w3.org/hg/webcomponents/raw-file/tip/spec/custom/index.html。使用这个或 https://github.com/mozilla/web-components/blob/master/src/document.register.js 或 https://github.com/Polymer/CustomElements 的 polyfill 意味着将创建很多（输入）元素以编程方式并为了获得良好的用户体验，它们应该作为内置元素工作。）

Answer 1

我想到的一种解决方法是在输入元素的值发生更改时使用window.history.replaceState 将其存储在浏览器的历史记录中。但我想知道是否可以直接挂钩到浏览器的自动完成功能，这样我就不必重复调用 replaceState。

还有另一种解决方法：与其使用历史 API 将动态生成的输入的值（无论何时更改）存储在浏览器历史记录中，不如创建一个静态隐藏的 <input> 字段来保存页面的状态并用于我们依靠浏览器恢复其价值的能力。

除了使用<input> 字段上的输入事件来检测要保存在当前会话的历史条目中的更改之外，还可以侦听pagehide 事件以保存当前值。这可能会更高效一些。但是，这不适用于在隐藏的输入字段中存储状态，因为 pagehide 事件之后的任何更改都会被丢弃（至少 Chrome 会丢弃）。