angular-localforage

angular-localForage

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 :

• 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

Usage :

• Download the project or install via bower bower install angular-localforage or npm npm install angular-localforage
• Download localForage https://github.com/mozilla/localForage
• Put angular-localStorage.js and localforage.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.getItem('myName').then(function(data) {
            var myName = data;
        });
    });

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

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

Functions :

• 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

Directive :

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>

Configure the provider :

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

Unit tests

Download the required libs :

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.

##Contributing

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

• Writing tests
• Elaborating on documentation
• Creating examples for the docs
• Bug reports and/or fixes

If you want to contribute, please submit a pull request, or contact [e-mail] 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 :

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

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:

• feat
• fix
• docs
• style
• refactor
• perf
• test
• chore
• revert

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.

Changelog

0.2.10 (2014-09-08)

Bug Fixes

• use angular.copy before storing values (e4707d3e, #29)
• use correct model to allow multiple binding (42f41d3a, #28)
• fixed tests for all browsers (06258791)

Documentation

• updated readme with lowercase name of the lib for bower & npm (809c6636)

<a name="0.2.9"></a>