Javascript 使用“后退”按钮时保留DOM更改

我有一个HTML表格，每行有一个删除按钮。delete按钮将向服务器发出AJAX调用以删除记录，如果删除成功，该行将从表中删除

HTML:

下面是一个演示：

除非用户跟随链接到另一个页面，然后使用浏览器的“后退”按钮返回到此页面，否则此操作正常。用户会看到一个旧版本的表，其中删除的行仍然可见（即DOM更改丢失）

我已经研究了有关堆栈溢出的其他类似问题，建议包括：

• 更新URL哈希（window.location.hash）
• 设置缓存控件标头以强制浏览器重新加载页面
• 当页面根据隐藏字段加载删除行时，使用隐藏输入字段跟踪删除的行
• 使用AJAX加载表（而不是在服务器端呈现）

然而，这些似乎都不是解决这个问题的好办法。有没有更好的解决办法

---

我似乎已经到了这样一个地步：网站变得更像桌面应用程序，也许像ApacheWicket或AngularJS这样的东西真的会出现。

选项1、2和5似乎没问题。我不知道第三个选项如何工作，因为浏览器不需要存储字段值中的更改

因此，除非您采用单页web应用程序的方式，如AngularJS，并通过不导航到另一页来避免导航问题，否则您需要处理浏览缓存问题。用户还可能单击了一个不同但类似于后退按钮问题的书签

---

此外，这不是一个非常有力的参数，但如果您查看堆栈溢出，您可以看到它使用了

缓存控制和ajax请求。
选项1、2和5似乎没有问题。我不知道第三个选项如何工作，因为浏览器不需要存储字段值中的更改

因此，除非您采用单页web应用程序的方式，如AngularJS，并通过不导航到另一页来避免导航问题，否则您需要处理浏览缓存问题。用户还可能单击了一个不同但类似于后退按钮问题的书签

此外，这不是一个很强的参数，但如果您查看堆栈溢出，您可以看到它使用了
缓存控制和ajax请求

<table>
    <tr>
        <td>Foo</td>
        <td><button class="delete-row" type="button">Delete Row</button></td>
    </tr>
</table>

$(function() {
    $('button.delete-row').click(function () {
        // Would delete the row with an AJAX request
        $(this).closest('tr').remove(); 
    });
});