Angular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.)

This angularJS module is a rewrite of angular-local-storage by grevory and angularLocalStorage by agrublev using the excellent Mozilla library localForage

• Store your data in the best available storage solution that your browser can offer (IndexedDB / WebSQL or localstorage as a fallback)

• All browsers are supported starting at IE8. For the full list check: IndexedDB support, WebSQL support and localstorage support

• Everything is async and uses promises

• Use the service or the directive

• Download the project or install via bower bower install angular-localForage
• Put angular-localStorage.js into you project
• Add the module LocalForageModule to your application

angular.module('yourModule', ['LocalForageModule']);

• (optional) Configure the $localForageProvider

angular.module('yourModule', ['LocalForageModule'])
.config(['$localForageProvider', function($localForageProvider){
    $localForageProvider.config({
        driver      : 'localStorageWrapper', // if you want to force a driver
        name        : 'myApp', // name of the database and prefix for your data
        version     : 1.0, // version of the database, you shouldn't have to use this
        storeName   : 'keyvaluepairs', // name of the table
        description : 'some description'
    });
}]);

• Use the $localForage service or the local-forage directive

angular.module('yourModule', ['LocalForageModule'])
.controller('yourCtrl', ['$scope', '$localForage', function($scope, $localForage) {
    // Start fresh
    $localForage.clearAll();
    $localForage.setItem('myName','Olivier Combe').then(function() {
        $localForage.get('myName').then(function(data) {
            var myName = data;
        });
    });

    $scope.params = {
        test: 'value'
    };
}]);

<div local-forage="params"></div>

• setDriver(driver): you can force the driver to use, check the localForage documentation for more information

• driver(): returns the current localForage driver (sync)

• setItem(key, value): stores data (async, promise)

• getItem(key): retrieves stored data (async, promise)

• removeItem(key): removes stored data (async, promise)

• clear(): removed all stored data for your application based on the app prefix (async, promise)

• key(n): retrieves the key at n position in storage. Used internally for clearAll and getKeys functions. It doesn't take prefix into account (async, promise)

• getKeys(driver): returns all the keys used for storage in your application. Be careful with it if you use localstorage because it will return all the keys (not just the ones with your prefix) (async, promise)

• length(driver): returns the number of items stored. Used internally for clearAll and getKeys functions. Be careful with it if you use localstorage because it will return all the keys (not just the ones with your prefix) (async, promise)

• bind($scope, key/params object): lets you directly bind a LocalForage value to a $scope variable

$localForage.bind($scope, 'params');

$localForage.bind($scope, {
    key: 'params',
    defaultValue: {test: 'my test'},
    storeName: 'myStoreName'
});

• unbind($scope, key[, storeName]): lets you unbind a variable from localForage while removing the value from both

You can directly bind a scope value from within your html :

angular.module('yourModule', ['LocalForageModule']).controller('yourCtrl', ['$scope', function($scope) {
    $scope.params = {
        test: 'value'
    };
}]);

<div local-forage="params"></div>

<div local-forage="{key: 'params', storeName: 'myStoreName'}"></div>

You can configure the $localForageProvider to set your own prefix for storage. By default lf is used.

angular.module('yourModule', ['LocalForageModule'])
.config(['$localForageProvider', function($localForageProvider){
    $localForageProvider.config({
        name: 'yourprefix'
    });
}]);

You can also choose to be notified by broadcast on set and remove.

angular.module('yourModule', ['LocalForageModule'])
.config(['$localForageProvider', function($localForageProvider){
    $localForageProvider.setNotify(true, true); // itemSet, itemRemove
}]);

The broadcast are the following :

$rootScope.$broadcast('LocalForageModule.setItem', {key: key, newvalue: value, driver: localforage.driver});
$rootScope.$broadcast('LocalForageModule.removeItem', {key: key, driver: localforage.driver});

And finally you can set the driver.

angular.module('yourModule', ['LocalForageModule'])
.config(['$localForageProvider', function($localForageProvider){
    $localForageProvider.setDriver('localStorageWrapper');
}]);

Install karma command line with npm install -g karma-cli.

Download the required libs :

bower install
npm install

Then start the tests with :

npm test

It will launch Chrome and Firefox, edit karma.conf.js if you want to change something.