javascript - 使用后退按钮时保留 DOM 更改

Question

我有一个 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 上的其他类似问题，建议包括:

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

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

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

Answer 1

选项 1、2 和 5 似乎不错。我不明白第三个选项如何工作，因为浏览器不需要存储字段值的更改。

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

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