🌜
🌞
ng-storage

ng-storage

v0.3.2

localStorage and sessionStorage done right for AngularJS.

npm install ng-storage

README

ngStorage

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

Differences with Other Implementations

  • No Getter 'n' Setter Bullshit - Right from AngularJS homepage: "Unlike other frameworks, there is no need to [...] wrap the model in accessors methods. Just plain old JavaScript here." Now you can enjoy the same benefit while achieving data persistence with Web Storage.

  • sessionStorage - We got this often-overlooked buddy covered.

  • Cleanly-Authored Code - Written in the Angular Way, well-structured with testability in mind.

  • No Cookie Fallback - With Web Storage being readily available in all the browsers AngularJS officially supports, such fallback is largely redundant.

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!

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:

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

Permitted Values | Demo

You can store anything except those not supported by JSON:

  • Infinity, NaN - Will be replaced with null.
  • undefined, Function - Will be removed.

Minification

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

Todos

  • ngdoc Documentation
  • Namespace Support
  • Unit Tests
  • Grunt Tasks

Any contribution will be appreciated.

General

License
MIT
Typescript Types
None found
Tree-shakeable
No

Popularity

GitHub Stargazers
2,342
Community Interest
2,934
Number of Forks
473

Maintenance

Commits
11/2110/2201
Last Commit
Sep 17, 2018
Open Issues
64
Closed Issues
107
Open Pull Requests
13
Closed Pull Requests
38

Versions

Versions Released
11/2110/2201
Latest Version Released
Feb 15, 2015
Current Tags
latest0.3.2

Contributors

egilkh
egilkh
Commits: 80
kbaltrinic
kbaltrinic
Commits: 6
roaks3
roaks3
Commits: 5
dcendents
dcendents
Commits: 3
lperrin
lperrin
Commits: 3
williamboman
williamboman
Commits: 2
krtek
krtek
Commits: 2
stylenclass
stylenclass
Commits: 2
dpogue
dpogue
Commits: 1
jlkalberer
jlkalberer
Commits: 1
OverZealous
OverZealous
Commits: 1
cayblood
cayblood
Commits: 1
rortegax2
rortegax2
Commits: 1
everdimension
everdimension
Commits: 1
alexgorbatchev
alexgorbatchev
Commits: 1