Home

Awesome

angular-localForage Build Status

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

Features :

Usage :

<script src="path/to/localforage.js"></script>
<script src="path/to/angular-localForage.js"></script>

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

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

<input local-forage="{key: 'autoStoredKey', name: 'myApp', scopeKey: 'myObj.myVar', defaultValue: 'this is the default value'}" ng-model="myObj.myVar" placeholder="This will be auto stored">

Functions :

localForage will return null for a lookup on a key that does not exist. If you set rejectIfNull to true, it will reject the promise if the value (or one of the values of the array lookup) is null. If you normally store null in the database, you can use the single arity version of the function to retrieve the null value, but you have no way to know if you've retrieved null or if the key did not exist.

Iterate supports early exit by returning non undefined value inside iteratorCallback callback. Resulting value will be passed to the promise as the result of iteration. You can use this to make a search in your data:

$localForage.iterate(function(value, key, iterationNumber) {
    if(angular.isInt(value) && value > 10) {
        return key;
    }
}).then(function(data) {
    // data is the key of the value > 10
});

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

Note: It only binds when the object is already stored in the database or when you provide a default value.

$localForage.bind($scope, {
    key: 'myStorageKey', // required
    defaultValue: {test: 'my test'}, // a default value (needed if it is not already in the database)
    scopeKey: 'myObj.myVar', // the name of the scope key (if you want it to be different from key)
    name: 'myApp' // instance name
});

Directive :

You can directly bind a scope value from within your html. With the local-forage directive, you can either use just the key parameter:

<input local-forage="autoStoredKey" ng-model="autoStoredKey" placeholder="This will be auto stored">

Or give an object parameter:

<input local-forage="{key: 'autoStoredKey', name: 'myApp', scopeKey: 'myObj.myVar', defaultValue: 'this is the default value'}" ng-model="myObj.myVar" placeholder="This will be auto stored">

key is the only required parameter. The other options are:

Configure the provider :

You can configure the $localForageProvider. Any parameter that you set here will be the default for any new localforage instance. You can for example set your own prefix for storage (by default lf is used).

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, it is "lf" by default
        version     : 1.0, // version of the database, you shouldn't have to use this
        storeName   : 'keyvaluepairs', // name of the table
        description : 'some description'
    });
}]);

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});

Multiple instances

You can use multiple instances of localForage at the same time. To create a new instance, call createInstance with a config object (sync):

    var lf2 = $localForage.createInstance({
		name: '2nd',
		driver: 'localStorageWrapper'
	});

The parameters will inherit the default parameters that you might have configured in the config phase of your application (See above for details), but the new config object will overwrite them. It means that you can have one instance using localStorage, and one instance using indexedDB/WebSQL, at the same time ! The instance will take the name that you will define in the config object. You can get an instance previously created by using the instance method:

    var lf2 = $localForage.instance('2nd');

The instance method will return the default instance if you don't give a name parameter.

Unit tests

Download the required libs :

npm install
bower install

Then start the tests with :

gulp karma

It will launch Chrome and Firefox, edit the karma task in gulpfile.js if you want to change something. We could use more tests, see "contributing" below.

Contributing

I would love to have community contributions and support! A few areas where could use help right now:

If you want to contribute, please submit a pull request, or contact olivier.combe@gmail.com for more information.

The commits messages need to be validated. Use the following commands to add a git hook that will check if you follow the convention :

When you commit your messages, follow this convention : <type>: <subject> <BLANK LINE> <optional message>

For example:

feat: Added validation commit msg file

Installation:
 * cd <angular-localForage-repo>
 * ln -s ../../validate-commit-msg.js .git/hooks/commit-msg

The following types are accepted in the commit messages:

But only feat/fix/docs/perf will be in the changelog.

If you do a breaking change, add an explanation preceded by BREAKING CHANGE: . For example:

fix: remove deprecated promise unwrapping

BREAKING CHANGE: promise unwrapping has been removed.
It can no longer be turned on.

If you want to reference an issue, you can add a new line with either Closes or Fixes followed by the issue number. For example:

feat: Added changelog auto generation

Usage: gulp changelog

Fixes #62

You can fix / close multiple issue with one commit, just add a new line for each.