用後退按鈕和「可排序」形式恢復表單狀態問題（Chrome和safari但不支持Firefox）

Question

我正在編寫此文件以記錄當前（明顯）的錯誤。

情況： 給定一個web應用程序，用戶可以在其中查看和排序表格數據（它從DOM加載，並通過javascript排序）。他們可以使用複選框和按鈕對查看的內容採取行動。

如果您使用返回按鈕返回表格數據頁面，則瀏覽器將填充複選框的狀態。這是預期的行爲。

併發症： 如果您先對錶格進行排序（使用JavaScript進行DOM內排序），然後填寫複選框並轉到其他頁面，然後使用後退按鈕返回，則瀏覽器的行爲將有所不同。

當前，Chrome（58）和Safari（10.1）以原始（不是按js排序）順序重新加載表單和表格數據，但按輸入順序恢復輸入（即忽略輸入的任何id - 當時只是他們在DOM中的順序） - 這導致了非常令人驚訝的行爲（形式乍一看似乎是你期望的，但不同的表單元素已經用不同的數據恢復）

但是Firefox （v50.0）以js排序的順序重新載入表單和表格數據，並且恢復的輸入是正確的。

我已經證明這更充分的https://timdiggins.github.io/back-button-restore-sorted-inputs/

理想情況下，瀏覽器將存儲對輸入的ID，而不是其在DOM爲了它們的輸入數據，或將緩存的DOM順序了。

我會用解決方法自己回答這個問題，但我希望有人會提出一個更好的建議。

或者在HTML5規範中的任何地方指出表單的DOM不應排序？ （也就是說Chrome和Webkit有可能在這裏有所規定）。

Answer 1

我發現了三種解決方法。兩個是非常可靠的，但每個都失去了功能，並且我在兩個想法中有一個關於

1）禁用初始形式（顯然）的動態排序。

2）禁用自動完成=「關閉」（每個輸入，見https://stackoverflow.com/a/2458153/109175）保存所有表單元素的表單狀態。或者可以跳過這種瀏覽器（如Firefox）有沒有問題的行爲（在我的使用情況下，Firefox從未使用過）。

3）發生在我身上的一個選項是確保訂單在保存表單狀態時重置爲原始DOM順序。這可能意味着在表單上添加一個提交處理程序（很簡單），但爲了確保在用簡單鏈接導航時正確恢復表單，這可能意味着在執行鏈接之前添加回調 - 這不會涵蓋基於JavaScript的導航。

4），它發生在我的另一種選擇，就是把重點放在重新排序過程 - 無論是把它從JS轉換爲重新加載頁面或從History API

兩個3和4使用pushState的或replaceState似乎聰明，但（對於我的用例），我傾向於使用1或2中的一個來處理減少的功能。