使用后退按鈕和“可排序”表單問題恢復表單狀態（Chrome和Safari但不是Firefox）

Question

我寫這篇文章來記錄當前（明顯的）錯誤。

情況：給定一個webapp，用戶可以查看和排序表格數據（它從DOM加載，並可通過javascript排序）。 他們可以使用復選框和按鈕對所查看的內容采取措施。

如果使用后退按鈕返回表格數據頁面，則瀏覽器會填寫復選框的狀態。 這是預期的行為。

復雜性：如果您首先對表格進行排序（使用javascript進行內部排序），然后填寫復選框並轉到另一個頁面，然后使用后退按鈕返回，則瀏覽器的行為會有所不同。

目前Chrome（58）和Safari（10.1）重新加載原始（不是js-sorted）順序中的表單和表格數據，但按照單擊順序恢復輸入（即忽略輸入的任何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）使用autocomplete =“off”禁用所有表單元素的保存表單狀態（在每個輸入上，請參閱https://stackoverflow.com/a/2458153/109175 ）。 可選地，可以跳過具有無問題行為的瀏覽器（如Firefox）（在我的用例中Firefox從未使用過）。

3）我遇到的一個選項是確保在保存表單狀態時將訂單重置為原始DOM順序。 這可能意味着在表單上添加一個before submit處理程序（很簡單）但是為了確保在使用簡單鏈接<a>導航時正確恢復表單，這可能意味着在執行鏈接之前添加回調 - 這不會' t覆蓋基於javascript的導航。

4）我遇到的另一個選擇是關注重新排序過程 - 將其從js轉換為頁面重新加載，或者使用來自History API的 pushState或replaceState

3和4看起來都很聰明，但是（對於我的用例）我傾向於使用1或2中的一個並處理減少的功能。