$cacheFactory deletes my cache when page reloads

Question

So I have a simple factory that creates cache object

.factory('jsonCache',function($cacheFactory){
    console.log("Creating cache");
    return $cacheFactory('weatherCache');
});

I'm then calling that cache object inside my controller like so by passing it in like so. But for some reason the data is not persistent. Every time I reload the page, the cache is empty again.

Any ideas? Did I miss something?

.controller('citiesListCtrl',function($scope,$http,$filter,jsonCache){

    jsonCache.get('weatherCache');
    console.log(jsonCache); <----- EMPTY

    $http.get(url)
        .then(function(response) {

          jsonCache.put('weatherCache', response.data.records);
          console.log(jsonCache); <--- HAS DATA
    });
)}

Answer 1

The data is not persistent for very good reason: $cacheFactory cache is nothing but a thin wrapper around plain JS object.

You can check the source to make sure that the service does nothing but simple LRU algorithm.

For data persistence use persistent storage (probably angular-local-storage or angular-localForage). angular-cache is an another replacement for built-in $cacheFactory that supports persistence.