AJAX 请求后返回时显示旧数据答案

【问题标题】：old data is shown when navigating back after an AJAX requestAJAX 请求后返回时显示旧数据
【发布时间】：2017-01-05 16:18:02
【问题描述】：

我在使用 asp.net core 1.0 (mvc) 对商店进行编程时遇到以下情况：

我在购物篮中添加了 3 件产品。
在购物篮中，我使用 AJAX 请求删除了 3 个产品之一。删除产品后，我会继续下一步，并被重定向到包含送货和付款设置的页面
在包含交付和付款设置的页面上，我选择导航回购物篮。我希望看到 2 个产品，但我看到了 3 个，因为该页面尚未从服务器重新加载。

当我检查提琴手时，我注意到没有对购物篮的各种资源执行任何请求。

在我的 BaseController 类中，我已经设置了以下应该禁用缓存的代码：

[NonAction]
public override async Task OnActionExecutionAsync(ActionExecutingContext context, ActionExecutionDelegate next)
{  
    context.HttpContext.Response.Headers.Add("Cache-Control", "no-store, must-revalidate");
    context.HttpContext.Response.Headers.Add("Expires", "0");
    context.HttpContext.Response.Headers.Add("Pragma", "no-cache");

    await next();
}

是否有人知道我们如何返回并查看仅包含 2 件产品的最新购物篮？

【问题讨论】：

我建议您在删除时返回产品列表，然后重新填充视图。后退按钮重新加载上次页面上的内容。
或者，如果您不担心紧缩，只要 ajax 请求成功，只需手动删除已删除的项目即可。

标签： ajax asp.net-core

【解决方案1】：

您可以使用这段简单的代码：

<head data-page-key="@string.Concat(this.ViewContext.RouteData.Values["controller"], @"_", this.ViewContext.RouteData.Values["action"])"
      data-page-token="@DateTime.Now.Ticks.ToString()">

    <script type="text/javascript">
        var pageKey = document.getElementsByTagName('head')[0].getAttribute("data-page-key");
        var pageToken = document.getElementsByTagName('head')[0].getAttribute("data-page-token");
        var pageTokenCached = sessionStorage[pageKey];
        if (!pageTokenCached || pageTokenCached !== pageToken) sessionStorage.setItem(pageKey, pageToken);
        else location.reload();
    </script>

浏览器的 sessionStorage 仅存储一个会话的数据。当用户关闭特定浏览器选项卡时，数据将被删除。

此处每次页面来自服务器时，都会生成一个新的 data-page-token 值，存储在标签中并保存在浏览器的 sessionStorage 中。

当用户点击浏览器BACK按钮时，从浏览器缓存中检索html页面，并执行。因此，缓存的令牌是从 sessionStorage 中检索出来的，与我们在页面中的内容相比，即 data-page-token。

如果值相等，则表示页面来自浏览器缓存，否则表示页面来自服务器。

当data-page-token等于sessionStorage的token时，说明我们有一个stale页面，所以重新加载，否则处理。

session Storage兼容所有浏览器，也支持IE 8.0

【讨论】：

这太聪明了！