角度缓存没有按预期工作答案

【问题标题】：angular-cache not working as expected角度缓存没有按预期工作
【发布时间】：2018-01-16 20:22:03
【问题描述】：

我试图在我的项目中使用angular-cache 模块，但不确定它是否正常工作。下面是代码——

angular.module('TrackerApp').factory('TrackerFactory', function ($resource, CacheFactory) {
    if (!CacheFactory.get('CenterCache')) {
        console.log('cache does not exists');
        CacheFactory.createCache('CenterCache', {
            maxAge: 5 * 60 * 1000,
            deleteOnExpire: 'aggressive'
        });
    }
    var centerCache = CacheFactory.get('CenterCache');
    var CenterClass = $resource(_ServiceBaseURL + 'api/Center/:id',{},{
        query: {
            method: 'GET',
            cache: centerCache,
            isArray:true
        }
    });
    CenterClass.GetMultipleAsObject = function () { return this.query(); };
    return {
        CenterClass: CenterClass
    };
});

在加载应用程序时，它会在控制台中打印“缓存不存在”的消息，并且会在本地存储中创建缓存。它在本地存储中的键下方创建-

“angular-cache.caches.CenterCache.keys” = [http://localhost/Services/Tracker/api/Center]

另一个密钥被创建

“angular-cache.caches.CenterCache.data.http:// localhost/Services/Tracker/api/Center” = mystoredvalue

问题——

在页面刷新 (f5) 时，我确实看到控制台消息再次打印，并且在 http 调用中，我可以看到“中心”信息正在下载，它不是从缓存中提取的。
从一页导航到另一页时，我看不到控制台消息正在打印。 但我确实看到“Center” api 被调用。数据正在网络选项卡中下载。它应该是从缓存中选择的。

我觉得它没有从缓存中提取数据。我错过了什么吗？

【问题讨论】：

对于问题 2：这不是问题，它应该是这样工作的。服务/工厂是单例的，只能创建一次。因此，在创建您导航到的第一个页面（并记录该消息）后，您将不会再次看到该消息，除非您重新加载该页面。
根据您发布的代码，对于问题 1，这是预期行为，因为您声明的缓存在内存中，因此如果您刷新页面，则缓存将被清除。所以当你发出请求时，第一时间不会在缓存中找到结果。见this working example。这是否与您正在尝试做的事情相匹配，或者如果不匹配，您能否更清楚地知道什么不起作用？
看，只有当你在同一页面上多次调用同一个 api 时它才有效。当您从一个页面导航到另一个页面时，它不起作用（意味着不从缓存中提取数据并调用 api）。在刷新页面时，它再次下载数据。实际上它应该从缓存中选择数据并说“来自缓存”，如 gmail。或者这可能是我在实现中的错误。
问题 2. 如果数据缓存在本地存储中，但在从一个页面导航到另一个页面时，如果您的应用程序不断下载它，那么缓存有什么用。以下来自官方文档注意：angular-cache 不会自动从定义的存储系统加载有关先前创建的缓存的元数据。这意味着在页面刷新时，此函数将返回未定义。要“重新加载”现有缓存，只需在每次加载应用时使用相同名称重新创建缓存，缓存可能会加载之前以该缓存名称保存的任何数据。
您能否发布一个示例，说明它只是在逐页导航时没有被缓存，因为我无法重现。

标签： angularjs caching local-storage angular-local-storage angular-cache

【解决方案1】：

也许你选择使用这种结构；

angular.module('cacheApp', []).
controller('CacheCtrl', ['$scope', '$cacheFactory', function($scope, $cacheFactory) {
  $scope.keys = [];
  // get cacheFactory
  $scope.cache = $cacheFactory('CenterCache');
  // Custom put
  // call function key and value
  $scope.put = function(key, value) {

  // Control cache
    if (angular.isUndefined($scope.cache.get(key))) {
      $scope.keys.push(key);
    }

   // Fill cache
    $scope.cache.put(key, angular.isUndefined(value) ? null : value);
  };
}]);

如果你想使用 cookieStore

angular.module('cookieStoreExample', ['ngCookies'])
.controller('ExampleController', ['$cookieStore', function($cookieStore) {

  // Fill cookie
  $cookieStore.put('CenterCache', yourObject );


  // Get cookie
  var favoriteCookie = $cookieStore.get('CenterCache');

  //If you want
  // Removing a cookie
  $cookieStore.remove('CenterCache');
}]);

【讨论】：