如何将angular-cache与AngularJS LocalStorageModule结合使用

Question

我有一个应用程序，当它启动时获取管理员用户列表。 数据看起来像这样：

var users =
[
{"id":"527ddbd5-14d3-4fb9-a7ae-374e66f635d4","name":"x"},
{"id":"966171f8-4ea1-4008-b6ac-d70c4eee797b","name":"y"},
{"id":"de4e89fe-e1de-4751-9605-d6e1ec698f49","name":"z"}
]

我有一个获取此数据的电话：

 os.getUserProfiles($scope);

和功能：

 getUserProfiles: function ($scope) {

    $http.get('/api/UserProfile/GetSelect')
       .success(function (data, status, headers, config) {
          $scope.option.userProfiles = data; 
       });
    },

我想避免管理员用户不得不连续发出请求 用户列表。我在Angular中查看$ cacheFactory，但这并不是真的 似乎满足了我的需求。

github上的角度缓存看起来很有趣，但我不太清楚如何使用 它使用这样的对象，然后使用LocalStorageModule存储数据。

有人可以举例说明他们如何将此产品与LocalStorageModule一起使用。

Answer 1

我建议检查扩展的angular-cache。

如文档中所述：http://jmdobry.github.io/angular-cache/guide.html#using-angular-cache-with-localStorage

app.service('myService', function ($angularCacheFactory) {

    // This cache will sync itself with localStorage if it exists, otherwise it won't. Every time the
    // browser loads this app, this cache will attempt to initialize itself with any data it had
    // already saved to localStorage (or sessionStorage if you used that).
    var myAwesomeCache = $angularCacheFactory('myAwesomeCache', {
        maxAge: 900000, // Items added to this cache expire after 15 minutes.
        cacheFlushInterval: 3600000, // This cache will clear itself every hour.
        deleteOnExpire: 'aggressive', // Items will be deleted from this cache right when they expire.
        storageMode: 'localStorage' // This cache will sync itself with `localStorage`.
    });
});

或者我们可以注入自定义本地存储实现

storageImpl: localStoragePolyfill // angular-cache will use this polyfill instead of looking for localStorage

我正在使用此插件https://github.com/grevory/angular-local-storage，它非常易于使用，同时提供完整的API。

同时检查本地存储使用情况以缓存模板：how to cache angularjs partials?

注：本文Power up Angular's $http service with caching，主要是以下部分：
 高级缓存，对我来说是移至angular-cache的原因

如何创建自定义Polyfill？ （适配器模式）

如记录here所示，我们需要传递实现此界面的 localStoragePolyfill ：

interface Storage {
  readonly attribute unsigned long length;
  DOMString? key(unsigned long index);
  getter DOMString getItem(DOMString key);
  setter creator void setItem(DOMString key, DOMString value);
  deleter void removeItem(DOMString key);
  void clear();
};

  

angular-cache只关心这三种方法：

     

  
• setItem
  
• 的getItem
  
• 的removeItem
  

I.e。：实现与本地存储API通信的包装器，将其转换为高级缓存api。而已。没有别的