/*global localStorage*/

/**
 * The Cacher Module with the service CacheLocal
 */
angular.module('Cacher', []).
factory('CacheLocal', function($cacheFactory) {
  var cache = $cacheFactory('someCache', {});
  var PREFIX = 'Cacher::';
  cache.get = function(key) {
    console.log('get', key);
    var lruEntry = localStorage.getItem(PREFIX + key);
    if (!lruEntry) return; // Cache miss
    lruEntry = JSON.parse(lruEntry);
    console.log('hit', lruEntry);
    return lruEntry.data; // Cache hit
  };
  cache.put = function(key, value) {
    if (typeof value.then === 'function') {
      value.then(function(value) {
        localStorage.setItem(PREFIX + key, JSON.stringify(value));
      });
    } else {
      localStorage.setItem(PREFIX + key, JSON.stringify(value));
    }
  };
  cache.remove = function(key) {
    localStorage.removeItem('Cacher::' + key);
  };
  cache.removeAll = function() {
    localStorage.clear();
  };
  return cache;
});

var app = angular.module('Test', ['Cacher'])

.factory('AJAX', function($http, CacheLocal) {
  return {
    getWord: function(file) {
      var promise = $http.get(file, {
        cache: CacheLocal
      }).then(function(d) {
        return d.data;
      });
      return promise;
    }
  };
})

.controller('MainCtrl', function($scope, AJAX) {
  $scope.obj = {
    filename: 'test.txt',
    result: ''
  };
  $scope.refresh = function() {
    if (!this.obj.filename) return;
    this.obj.result = AJAX.getWord(this.obj.filename);
  };
  $scope.refresh();
});
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body>
	<div ng-app="Test" ng-controller="MainCtrl">
		<h3>Cached $http Requests</h3>
    File to load: <input ng-model="obj.filename" placeholder="filename">
		<button ng-click="refresh()">Load</button>
    <div>
      <h3>Result:</h3>
      <textarea>{{obj.result}}</textarea>
    </div>
	</div>
</body>
</html>
/* Put your css in here */