如何删除使用 AngularJS 的 HTML 中的浏览器缓存？答案

【问题标题】：How to remove the browser cache in HTML which uses AngularJS?如何删除使用 AngularJS 的 HTML 中的浏览器缓存？
【发布时间】：2016-02-23 17:08:21
【问题描述】：

如何删除使用 AngularJS 的 HTML 中的浏览器缓存？我在 index.html 中使用了以下内容。我也尝试在我的 app.js 中使用$templateCache，但没有用。

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />


app.config(['$routeProvider', function($routeProvider) {
          $routeProvider.when('/login',{templateUrl: '/partials/login.html',controller:'loginCtrl'});
        $routeProvider.when('/fingerprint',{templateUrl: '/partials/fingerprint.html',controller:'fingerprintCtrl',resolve: {
                            factory: checkRouting
                        }});
        $routeProvider.otherwise({redirectTo: '/login'});
        }]).
        run(function($templateCache) {
          $templateCache.removeAll();
        });

        var checkRouting= function ($q, $rootScope, $location,$http) {
            if ($rootScope.loggedUser) {
                return true;
            } else {
                var deferred = $q.defer();
                $http.post("#/fingerprint", { userToken: "blah" })
                    .success(function (response) {
                        $rootScope.loggedUser = response.loggedUser;
                        deferred.resolve(true);
                    })
                    .error(function () {
                        deferred.reject();
                        $location.path("/");
                     });
                return false;
            }
        };

任何帮助将不胜感激！

【问题讨论】：

浏览器缓存没有被自动删除。用户每次登录时都必须手动删除它才能看到更改。

标签： html angularjs browser-cache

【解决方案1】：

如果它真的存储在浏览器的缓存中，那么它与$templateCache 无关，因为 Angular 仅使用它来缓存模板。

也许检查静态*.html的标头中的服务器缓存设置。

顺便说一句，您如何从浏览器中手动删除缓存页面？通过转储所有临时数据？

【讨论】：

可能我的问题不清楚，我这样说吧。每次登录以查看更改时，我都需要进行强制刷新。不同的用户有不同的自定义视图，这些视图由 Angular 部分调用。当我右键单击->检查元素并检查网络选项卡时，我可以看到这些部分正在被缓存。我不希望它们被缓存。
就是这么想的。 *.html 文件是否返回 304 状态代码，这意味着它们已被缓存？如果是这样，请查看服务器配置，或者如果您通过某些后端脚本（例如 PHP）呈现它们，请检查您在那里设置的标头（例如 ETag、Last-Modified 等）。
res.setHeader('cache-control', 'no-cache', 'no-store', 'must-revalidate');我应该使用这个吗？
我的指令中有一个逻辑，它调用与用户详细信息对应的部分。因此，当用户登录时，它会显示调用相应的部分，但由于它们正在被缓存，所以它只显示前一个部分。那么设置 Last-modified 标签会有什么影响呢？
您写道它在浏览器中缓存并且您已经使用$templateCache.removeAll()。这就是为什么。

【解决方案2】：

在 html href="javascript:location.reload(true)" 中添加锚标记“清除缓存”

【讨论】：