ngStorage

An AngularJS module that makes Web Storage working in the Angular Way. Contains two services: $localStorage and $sessionStorage.

Differences with Other Implementations

Install

bower install ngstorage

Usage

Require ngStorage and Inject the Services

angular.module('app', [
    'ngStorage'
]).controller('Ctrl', function(
    $scope,
    $localStorage,
    $sessionStorage
){});

Read and Write | Demo

Pass $localStorage (or $sessionStorage) by reference to a hook under $scope in plain ol’ JavaScript:

$scope.$storage = $localStorage;

And use it like you-already-know:

<body ng-controller="Ctrl">
    <button ng-click="$storage.counter = $storage.counter + 1">{{$storage.counter}}</button>
</body>

Optionally, specify default values using the $default() method:

$scope.$storage = $localStorage.$default({
    counter: 42
});

With this setup, changes will be automatically sync’d between $scope.$storage, $localStorage, and localStorage - even across different browser tabs!

Read and Write Alternative (Not Recommended) | Demo

If you’re not fond of the presence of $scope.$storage, you can always use watchers:

$scope.counter = $localStorage.counter || 42;

$scope.$watch('counter', function() {
    $localStorage.counter = $scope.counter;
});

$scope.$watch(function() {
    return angular.toJson($localStorage);
}, function() {
    $scope.counter = $localStorage.counter;
});

This, however, is not the way ngStorage is designed to be used with. As can be easily seen by comparing the demos, this approach is way more verbose, and may have potential performance implications as the values being watched quickly grow.

Delete | Demo

Plain ol’ JavaScript again, what else could you better expect?

// Both will do
delete $scope.$storage.counter;
delete $localStorage.counter;

This will delete the corresponding entry inside the Web Storage.

Delete Everything | Demo

If you wish to clear the Storage in one go, use the $reset() method:

$localStorage.$reset();
````

> Optionally, pass in an object you'd like the Storage to reset to:
>
>

javascript

$localStorage.$reset({ counter: 42 });

“‘

Permitted Values | Demo

You can store anything except those not supported by JSON:

Minification

Just run $ npm install to install dependencies. Then run $ grunt for minification.

Todos

Any contribution will be appreciated.