使用后退按钮时保留 DOM 更改答案

【问题标题】：Preserve DOM changes when back button is used使用后退按钮时保留 DOM 更改
【发布时间】：2015-06-12 18:20:16
【问题描述】：

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

HTML：

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

JavaScript：

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

这是一个演示： https://jsfiddle.net/05vmz344/

这可以正常工作，除非用户点击另一个页面的链接，然后使用浏览器的后退按钮返回该页面。向用户显示的是表的陈旧版本，删除的行仍然可见（即 DOM 更改丢失）。

我查看了有关 Stack Overflow 的其他类似问题，建议包括：

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

但是，这些似乎都不是解决这个问题的好方法。有没有更好的解决方案？

我似乎正处于一个网站变得更像一个桌面应用程序的地步，也许像 Apache Wicket 或 AngularJS 这样的东西会真正发挥作用。

【问题讨论】：

标签： javascript html ajax

【解决方案1】：

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

因此，除非您采用 单页网络应用程序 方式，例如 AngularJS，并且通过不导航到另一个页面来避免导航问题，否则您需要处理浏览缓存问题。用户也可能点击了一个与返回按钮问题不同但相似的书签。

此外，这不是一个非常有力的论据，但如果您查看 Stack Overflow，您会发现它使用了 Cache-Control 和 ajax 请求。

【讨论】：