<!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 */