Comparing localStorage modules for Angular

I think the best way to show the difference between modules/frameworks is to show code snippets of how you would use it in your code (for most people anyway). I'll show how one would use it in a controller.

Disclaimer: I only use ngStorage in my own work.

ngStorage

https://github.com/gsklee/ngStorage

angular.module('app', ['ngStorage'])
.controller('Controller', ['$scope', '$localStorage',
  function ($localStorage) {
    // Changes will be reflected.
    $scope.MyCollection = $localStorage.MyCollection;
  }]);

PROS

Watches changes for you, let's you be lazy.

CONS

Does not provide any fallback if localStorage is not supported. localStorage is limited to max 5MB on most mobile devices and can be deleted when the OS decides so on iOS.

angular-storage

https://github.com/auth0/angular-storage

angular.module('app', ['angular-storage'])
.controller('Controller', ['$scope', 'store',
  function($scope, store) {
    // Changes will not be reflected.
    $scope.MyCollection = store.get('MyCollection');

    // Some time later when your collection has changed:
    store.set('MyCollection', $scope.MyCollection);
  }]);

PROS

Fallback to ngCookies if localStorage is not supported. Allows you to namespace/prefix your objects.

CONS

Does not watch for changes, let's you do all the work.

angular-localForage

Angular service & directive for https://github.com/mozilla/localForage.

https://github.com/ocombe/angular-localForage

angular.module('app', ['LocalForageModule'])
.controller('Controller', ['$scope', '$localForage',
  function ($scope, $localForage) {
    $localForage.getItem('MyCollection').then(function (data) {
      // Changes will not be reflected.
      $scope.MyCollection = data;
    });

    // Some time later when your collection has changed:
    $localForage.setItem('MyCollection', $scope.MyCollection);
  }]);

PROS

Supports a bunch of methods for offline storage.

CONS

Does not watch for changes, let's you do all the work.

Is an abstraction on top of a storage library. Which compared to the rest is a con.

angular-locker

https://github.com/tymondesigns/angular-locker

angular.module('app', ['angular-locker'])
.controller('Controller', ['$scope', 'locker',
  function ($scope, locker) {
    // Changes will not be reflected.
    $scope.MyCollection = locker.get('MyCollection');

    // Some time later when your collection has changed:
    locker.put('MyCollection', $scope.MyCollection);
  }]);

PROS

Seems to have a whole lot of functionality, namespaces, config, multiput.

CONS

Does not watch for changes, let's you do all the work.