How can I use angular-cache in conjunction with the AngularJS LocalStorageModule

Question

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.

Answer 1

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