<!DOCTYPE html>
<html ng-app="testLZString">

  <head>
    <script data-require="angular.js@1.5.8" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
    <script src="https://unpkg.com/localforage@1.4.3/dist/localforage.js"></script>
    <script src="https://unpkg.com/angular-localforage@1.3.1/dist/angular-localForage.js"></script>
    <script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <root></root>
  </body>

</html>
angular.module('testLZString',['LocalForageModule'])
.config(['$provide', function configLocalForage($provide) {
  $provide.decorator('$localForage', [
    '$delegate',
    function localForageDecorator($delegate) {
      var originalSetItem = $delegate.setItem;
      var originalGetItem = $delegate.getItem;

      $delegate.setItem = function pakoSetItem(key, value) {
        var originalString = JSON.stringify(value);
        var compressedString = LZString.compress(originalString);
        console.log('Original string size: ' + originalString.length);
        console.log('Compressed string size: ' + compressedString.length);
        return originalSetItem.apply($delegate, [key, compressedString]);
      };
      $delegate.getItem = function pakoGetItem() {
        return originalGetItem.apply($delegate, arguments)
          .then(function pakoInflateFromLocalForage(value) {
            return JSON.parse(LZString.decompress(value));
          });
      };

      return $delegate;
    }
  ]);
}])
.component('root', {
  template: '<code ng-bind="$ctrl.fromLocalForage | json"></code>',
  controller: ['$localForage', function testPakoController($localForage) {
    var vm = this;
    vm.fromLocalForage = 'nothing';
    vm.$onInit = function $onInit() {
      $localForage.setItem('jsonData', { name: 'LocalForage', isCompressed: true })
        .then(function setItemSuccess() {
          return $localForage.getItem('jsonData', true);
        })
        .then(function getItemSuccess(value) {
          vm.fromLocalForage = value;
        });
    }
  }]
});
/* Styles go here */