javascript - 如何防止浏览器后退按钮重新显示我的用户通知？

Question

我为我一直在开发的 ASP.NET MVC3 站点构建了一个通知系统，让用户知道他们执行的各种操作已成功发生(“拍拍背”消息)。该解决方案效果很好，但我有一个问题很想解决，但我似乎无法全神贯注于如何解决。

在 Controller 中，我有以下示例操作方法:

<HttpGet()>
Public Function Edit(id As Guid) As ActionResult
    Return View(GetMyViewModel(id))
End Function

<HttpPost()>
Public Function Edit(...) As ActionResult
    ' Save updated ... information

    Me.TempData("UserMessage") = "Data Saved! You are truly an awesome user!"

    ' PRG back to Edit
    Return RedirectToAction("Edit")
End Function

然后在我的 View (razor 布局)中，我有代码查找 TempData 集合中是否存在 "UserMessage" 键，如果它存在，我构建输出一些 JavaScript 来为用户呈现类似咆哮的通知:

/* This only exists when we have something to show */
$(function () {
    showNotification([the message from TempData]); 
});

然后，类似咆哮的消息会随时间消失，或者用户可以单击该消息将其关闭。

到目前为止一切顺利，一切都按预期进行。用户 POST 到 Edit，它们被 RPG 返回到 Edit，类似咆哮的“Data Saved!你真是一个了不起的用户!”消息显示并关闭。

如果用户然后导航到另一个页面，然后点击浏览器的后退按钮，浏览器就会挖掘其缓存，导致浏览器执行相同的 javascript，向用户显示相同的“数据已保存!你是真正了不起的用户!”消息。这让用户感到困惑，他们认为通过单击后退按钮，他们只是做了一些导致又一次保存的事情(或任何消息)。

我正在寻找一种方法，一旦通知显示一次，我就可以以某种方式阻止通知再次显示——基本上使其成为“一次性”消息。我想到的事情是:

• 在每条消息中包含一个 Guid，并使用 localStorage 存储显示的消息 ID 列表，并且仅当所请求的消息不存在于显示的消息列表中时，才显示它.
  • 我曾考虑过以同样的方式使用 Cookie，但对于 cookie 被不必要地传回服务器以供将来请求使用的想法感到畏缩，而且 cookie 的内容需要仔细考虑并且可能根据-无论如何都要发消息。
• 不是从操作方法返回消息，而是返回指向数据库中消息的 Guid。然后在页面加载时，AJAX 返回到服务器以获取该消息。一旦收到一条消息，它就会从数据库中删除，对同一消息的后续请求将通过不返回任何消息来处理。
• 在每条消息中包含一个 Guid，在显示消息之前，AJAX 返回服务器以查看消息是否已经显示。消息显示后，AJAX 返回服务器以记录消息已显示。

这些对我来说似乎都是站不住脚的，但如果有人想为其中之一争取支持，我可能会被说服。

我尝试过的事情:

• 消息被关闭后，删除 DOM 元素的所有痕迹。
• 显示消息时，在消息的 DOM 元素上设置 jQuery .data() 属性以指示已显示消息，然后在显示消息之前确保 . data() 字段不存在。

这些不起作用，因为浏览器会在这两个 DOM 更改之后发生的时间点缓存页面。

基本上，我需要一种机制，我的 javascript 可以检查它是否真的需要显示此给定消息，如果需要，则显示它，然后将消息标记为已显示，以便在请求显示时显示再次，它没有。有什么建议吗？

Answer 1

您还可以利用浏览器记住表单值这一事实，简单示例:

<input id="notification" style="display:none" value="Data Saved!">
<script  type="text/javascript">
$(function () {
    if($('#notification').val())
    {
      alert($('#notification').val());
      $('#notification').val('');
    }
});
</script>