确保当用户返回页面而不刷新时，javascript更改的元素保持不变

Making sure elements changed by javascript remain changed when user returns to page without refreshing

本文关键字：javascript 元素返回用户刷新确保更新时间：2023-09-26

很抱歉标题不稳定，很难描述问题。此外，很抱歉，如果这是重复的，很难搜索。

我正在尝试使用JQuery在按钮按下时实现一个相对简单的AJAX调用。我的目标是有一个按钮，上面写着"添加到列表"或"从列表中删除"，当按下时，会对服务器进行AJAX调用，以适当地添加/删除列表中的项目。成功后，JQuery会更改按钮以反映后端的更改（因此从Add to->Remove from，反之亦然）。

我希望即使用户没有启用Javascript（这是个好主意，对吧？），我的按钮也能工作，所以我的按钮在一个标准的html表单中，该表单进行POST调用，执行DB操作，然后将用户重定向到他们刚刚访问的网页。我用JQuery覆盖了这种默认行为。

为了在用户第一次加载页面时显示正确的按钮类型，以及在启用Javascript的情况下进行标准POST调用时，我使用Django的模板系统来显示表单中正确的按钮/隐藏值。

这一切都很好。。。大部分情况下。我遇到的问题是，当用户使用Javascript单击按钮，然后转到另一个页面，然后使用页面返回按钮返回页面时，更改不会保留。也就是说，按钮显示为Django在第一次加载页面时所呈现的状态。如果用户重新加载页面，则会修复此问题。

当然，这对用户来说是非常令人困惑的，因为按钮不能正确地反映DB的状态。我该怎么解决这个问题？

不幸的是，这个问题没有真正好的答案。后退按钮通常返回到缓存在用户浏览器上的页面版本，并且与许多形式的动态内容交互不佳。你可能会考虑说服用户不要使用后退按钮（通过强大的导航栏或他们可以使用的等效功能，后退按钮变得更容易），或者写一条有用的注释。你也可以放入各种元阶段来告诉浏览器不要缓存页面（从而使他们每次都能完全加载页面），但这可能会减慢速度，而且可能不是所有浏览器都遵循。