使用后退按钮和“可排序”表单问题恢复表单状态（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中的一个并处理减少的功能。