npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

angular-localforage-setitems

v1.0.0

Published

Angular service & directive for https://github.com/mozilla/localForage (Offline storage, improved.) with added performant setItems function

Downloads

3

Readme

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 :

  • 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 localforage.js and angular-localForage.js into your project (with localforage.js before angular-localForage.js).
<script src="path/to/localforage.js"></script>
<script src="path/to/angular-localForage.js"></script>
  • Add the module LocalForageModule to your application
angular.module('yourModule', ['LocalForageModule']);
  • (optional) Configure the $localForageProvider. See below for details.
  • Use the $localForage service or the local-forage directive
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 :

  • 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/Array<key>, value/Array<value>): stores data (async, promise)

  • getItem(key/Array<key>, rejectIfNull): retrieves stored data, rejects if rejectIfNull is truthy and one of the values is null (async, promise)

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.

  • removeItem(key/Array<key>): removes stored data (async, promise)

  • pull(key/Array<key>): removes stored data and returns it (it's like doing getItem followed by removeItem) (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. It doesn't take the prefix into account if you use localStorage (async, promise)

  • keys(): returns all the keys used for storage in your application (async, promise)

  • length(): returns the number of items stored (async, promise)

  • iterate(iteratorCallback): Iterate over all value/key pairs in datastore. (async, promise)

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
});
  • bind($scope, key/params object): lets you directly bind a LocalForage value to a $scope variable (async, promise)
$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
});
  • unbind($scope, key[, scopeKey]): lets you unbind a variable from localForage while removing the value from both the scope and the storage (async, promise)

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:

  • name: if you want to store your values in a specific instance (See below for more info on multiple instances)
  • scopeKey: if you want to store the value in the scope under a different key from the one in storage. You can for example use a specific key of an object by using myObj.myVar
  • defaultValue: if you want to define a ...default value

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:

  • 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 [email protected] 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.