2

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

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 。使用这个或polyfills https://github.com/mozilla/web-components/blob/master/src/document.register.js或https://github.com/Polymer/CustomElements表示将创建很多（输入）以编程方式的元素并为了获得良好的用户体验，它们应该作为内置元素工作。）

4

1 回答 1

1

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

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

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

于 2014-04-14T23:00:11.317 回答