如何使用角度缓存与AngularJS一起LocalStorageModule [英] How can I use angular-cache in conjunction with the AngularJS LocalStorageModule

问题描述

我有一个应用程序在启动时得到管理员的用户列表。
数据看起来是这样的：

  VAR用户=
[
{ID：527ddbd5-14d3-4fb9-a​​7ae-374e66f635d4，名：X}，
{ID：966171f8-4ea1-4008-b6ac-d70c4eee797b，名：Y}，
{ID：de4e89fe-e1de-4751-9605-d6e1ec698f49，名：Z}
]
 

我有一个电话，获取这样的数据：

  os.getUserProfiles（$范围内）;
 

和功能：

  getUserProfiles：功能（$范围）{    $ http.get（'/ API /用户配置/ GetSelect'）
       .success（功能（数据，状态，头，配置）{
          $ scope.option.userProfiles =数据;
       }）;
    }，
 

我想避免的管理员用户不必不断地发出请求获得
用户列表。我一直在寻找在$ cacheFactory在角但这并不真的
似乎满足我的需求。

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

有人可以给我的他们是如何使用的LocalStorageModule本产品的例子。

解决方案

我建议核查扩展角-cache 。

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

  app.service（'为myService'，函数（$ angularCacheFactory）{    //如果存在这种缓存将自身与同步本地存储，否则将无法。每次
    //浏览器加载这个程序，这个缓存将尝试本身它有任何的数据初始化
    //已经保存到localStorage的（或者sessionStorage的，如果你使用的）。
    VAR myAwesomeCache = $ angularCacheFactory（'myAwesomeCache'，{
        MAXAGE：900000，//加入到这一缓存项在15分钟后到期。
        cacheFlushInterval：3600000，//这个缓存会清除每隔一小时本身。
        deleteOnExpire：'侵略性'，//项目将被从这个缓存权当到期被删除。
        storageMode：localStorage的'//这个缓存将自身与同步`localStorage`。
    }）;
}）;
 

或者我们可以注入自定义本地存储执行

  storageImpl：// localStoragePolyfill角缓存会使用，而不是寻找localStorage的这种填充工具
 

我使用这个插件 https://github.com/grevory/angular-local-storage ，这是非常简单的使用，同时提供完整的API。

另外，请检查本地存储使用情况缓存模板：如何缓存angularjs谐音

注：本文功率高达角的$ HTTP服务与缓存，且多节：结果
 高级缓存，是对我的移动到的原因角缓存 的

如何创建自定义填充工具？的（Adapter模式）的

由于记录这里，我们需要通过 localStoragePolyfill 实现此接口：

 接口存储{
  只读属性无符号长的长度;
  的DOMString？键（无符号长指数）;
  吸气的DOMString的getItem（的DOMString键）;
  二传手的创造者无效setItem（的DOMString键，值的DOMString）;
  删除器无效的removeItem（的DOMString键）;
  无效清除（）;
};
 

  

角缓存只关心这三个方法：

  
  

  
• setItem

  
• 的getItem

  
• 的removeItem

  

即：实现包装与本地存储API说话，将其转化为先进的缓存API。而已。闲来无事

I have an application that when it starts gets a list of admin users. The data looks something like this:

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"}
]

I have a call that gets this data:

 os.getUserProfiles($scope);

and the function:

 getUserProfiles: function ($scope) {

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

I would like to avoid the admin users having to continuously issue the requests to get the user list. I was looking at the $cacheFactory in Angular but this does not really seem to meet my needs.

The angular-cache that's on github looks interesting but I'm not quite sure how to use it with objects like this and then have the data stored using the LocalStorageModule.

Can someone give me an example of how they have used this product with the LocalStorageModule.

解决方案

I would suggest check the extended angular-cache.

As described in documentation: 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`.
    });
});

Or we can inject custom Local storage implementation

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

I am using this plugin https://github.com/grevory/angular-local-storage, which is really simple to use, while providing full API.

Also check a local storage usage for caching the templates: how to cache angularjs partials?

NOTE: This article Power up Angular's $http service with caching, and mostly the section:
Advanced caching, was for me the reason to move to angular-cache

How to create a custom Polyfill? (Adapter pattern)

As documented here, we need to pass the localStoragePolyfill implementing this interface:

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 cares only about these three methods:

• setItem
• getItem
• removeItem

I.e.: Implement a wrapper talking with local-storage API, transforming it to the advanced cache api. That's it. Nothing else

这篇关于如何使用角度缓存与AngularJS一起LocalStorageModule的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！