angular.jsには$cacheFactory?っていうのがあるけれどもおそらくはlocalStorageとかにキャッシュしたりするような機構は備わっていないはず。でそういうのを出来るようになるangular-cacheっていうのを使ってみたのでメモ

const CACHE_ID = "cache_id";

angular.module('sample', ['angular-cache'])
  .config(function(CacheFactoryProvider) {
    angular.extend(
      CacheFactoryProvider.defaults,
      {
        // 10秒後
        maxAge: 5000,
        // localStorageにキャッシュを格納する。デフォルトはmemory?
        storageMode: "localStorage",
        storagePrefix: "cache.",
        // aggressiveを使う事でmaxAgeに伴うキャッシュの有効期限が切れると自動でデータを削除しonExpireを発動する
        // passiveの場合には自動でonExpireは発動せずにリロード時等のキャッシュのチェック時にonExpireが発生する
        deleteOnExpire: "aggressive",
        // trueにする事で、put時に引数にPromiseが指定された場合にresolveな値を突っ込む事が出来る。rejectの場合はstoreOnReject
        storeOnResolve: true
      }
    );
  })
  .controller('SampleCtrl', [
    '$scope', '$timeout', 'CacheFactory', '$http',
    function($scope, $timeout, CacheFactory, $http) {
      var cache = CacheFactory(
        CACHE_ID,
        // 上記CacheFactoryProviderの設定をここでも指定出来る
        {
          onExpire: function(key, value) {
            $timeout(function() {
              $scope.reports = [];
            }, 0);
          }
        }
      );

      cache.put("test1", "hoge");
      cache.put("test2", new Promise(function(resolve) { resolve('A'); }));

      // cacheの状態を持っている場合にPromiseを格納したのをgetする場合には返り値はPromiseになるが状態を持ってない場合にはPromiseでresolve/rejectした値が返り値として返ってくるっぽい(要は返り値の型が違う?)
      console.log(cache.get('test2'));

      // $httpのcacheに指定すればHTTPリクエストをキャッシュする事も出来る
      $http.get('/report.json', { cache: cache }).success(function(data) {
        $scope.reports = data;
      });
    }
  ]);

っていうような感じで$httpのキャッシュにlocalStorageを使ったりする事も出来る。でキャッシュ機構な方式はLRUキャッシュを使うけれどもそのcapacityはNumber.MAX_VALUEになっている模様。オプションでは他にも

• cacheFlushInterval 一定の感覚でキャッシュをflushする
• storageImpl 格納するStorage API実装を定義(setItem/getItem/removeItemさえ実装されてれば良いらしい)

ってな感じでangular.jsでキャッシュ的なのをlocalStorageで使いたい場合にはこれをつかえば出来るっぽいって事で