自動完成/恢復導航時動態創建的輸入表單域

Question

假設我在HTML頁面上有一個<input>元素。當我填寫一個值時，向前瀏覽到另一個頁面並向後導航，通常會恢復該值：

1）在Firefox中，由於BFCache：https://developer.mozilla.org/en-US/docs/Working_with_BFCache，整個頁面狀態正在恢復。 （這意味着即使正在運行的腳本的狀態正在恢復。）

2）在Chrome中，快速頁面緩存似乎不起作用（因此頁面被重置爲原始狀態），但是輸入字段正在保留。

現在，如果我通過腳本動態添加<input>字段，那麼在Firefox中，值仍將被恢復（因爲所有內容都已恢復）。

但是，在Chrome中，創建<input>字段的Javascript必須重新運行，以便該輸入字段對引擎顯示爲全新的，這意味着不會恢復任何值。

所以我的問題是：如何實現Chrome的功能2）動態生成<input>（或如何給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的polyfills意味着人會以編程方式創造了很多（輸入）元素和一個良好的用戶的經驗，他們將正常運行內置的元素。）

Answer 1

一個解決我想到的是使用window.history.replaceState只要輸入要素的變化值，將其存儲在瀏覽器的歷史記錄。但我想知道我是否可以直接掛鉤到瀏覽器的自動完成功能，以便我不必重複調用replaceState。

還有另一種解決方法：可以創建一個靜態隱藏字段，而不是使用歷史記錄API存儲該值的值（無論何時發生更改）動態生成的輸入，可以創建一個隱藏頁面狀態的靜態隱藏字段，我們依靠瀏覽器恢復其價值的能力。

除了使用<input>字段上的輸入事件來檢測要保存在當前會話歷史條目中的更改，還可以偵聽pagehide事件以保存當前值。這可能會更高效一些。但是，這不適用於在隱藏輸入字段中存儲狀態，因爲頁面隱藏事件後的任何更改都被丟棄（至少由Chrome）。