如何将 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 上的 angular-cache 看起来很有趣，但我不太确定如何使用 它使用这样的对象，然后使用 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 只关心这三种方法：

• 设置项目
• 获取项目
• 删除项目

即：实现一个与本地存储 API 对话的包装器，将其转换为高级缓存 API。而已。没有别的了