An Angular module that gives you access to the browsers local storage
npm install angular-local-storageangular-local-storage
=====================
An Angular module that gives you access to the browsers local storage
[![NPM version][npm-image]][npm-url]
[![Build status][travis-image]][travis-url]
[![Test coverage][coveralls-image]][coveralls-url]
[![Dependency Status][david-image]][david-url]
[![License][license-image]][license-url]
[![Downloads][downloads-image]][downloads-url]
bash
$ bower install angular-local-storage --save
`
npm:
bash
$ npm install angular-local-storage
`
(2) Include (or angular-local-storage.min.js) from the dist directory in your index.html, after including Angular itself.(3) Add
'LocalStorageModule' to your main module's list of dependencies.When you're done, your setup should look similar to the following:
`html
...
...
...
`
Configuration
$3
You could set a prefix to avoid overwriting any local storage variables from the rest of your app
Default prefix:
js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('yourAppName');
});
`
$3
You could change web storage type to localStorage or sessionStorage
Default storage:
js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setStorageType('sessionStorage');
});
`
$3
If localStorage is not supported, the library will default to cookies instead. This behavior can be disabled.
Default:
js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setDefaultToCookie(false);
});
`
$3
Set cookie options (usually in case of fallback)
expiry: number of days before cookies expire (0 = session cookie). default:
path: the web path the cookie represents. default:
secure: whether to store cookies as secure. default:
js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setStorageCookie(45, '', false);
});
`
$3
Set the cookie domain, since this runs inside a the block, only providers and constants can be injected. As a result, $location service can't be used here, use a hardcoded string or window.location.
No default value
`js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setStorageCookieDomain('');
});
`For local testing (when you are testing on localhost) set the domain to an empty string ''. Setting the domain to 'localhost' will not work on all browsers (eg. Chrome) since some browsers only allow you to set domain cookies for registry controlled domains, i.e. something ending in .com or so, but not IPs or intranet hostnames like localhost.
$3
Configure whether events should be broadcasted on $rootScope for each of the following actions:
setItem , default:
, event "LocalStorageModule.notification.setitem"
removeItem , default: false, event "LocalStorageModule.notification.removeitem"
`js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setNotify(true, true);
});
`
$3
Using all together
js
myApp.config(function (localStorageServiceProvider) {
localStorageServiceProvider
.setPrefix('myApp')
.setStorageType('sessionStorage')
.setNotify(true, true)
});
`
API Documentation
isSupported
Checks if the browser support the current storage type(e.g: , sessionStorage).
Returns: Boolean
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
if(localStorageService.isSupported) {
//...
}
//...
});
`
$3
Change the local storage prefix during execution
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
localStorageService.setPrefix('newPrefix');
//...
});
`
$3
Returns:
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
var storageType = localStorageService.getStorageType(); //e.g localStorage
//...
});
You can also dynamically change storage type by passing the storage type as the last parameter for any of the API calls. For example:
$3
Directly adds a value to local storage.
If local storage is not supported, use cookies instead.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function submit(key, val) {
return localStorageService.set(key, val);
}
//...
});
`
$3
Directly get a value from local storage.
If local storage is not supported, use cookies instead.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function getItem(key) {
return localStorageService.get(key);
}
//...
});
`
$3
Return array of keys for local storage, ignore keys that not owned.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
var lsKeys = localStorageService.keys();
//...
});
`
$3
Remove an item(s) from local storage by key.
If local storage is not supported, use cookies instead.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function removeItem(key) {
return localStorageService.remove(key);
}
//...
function removeItems(key1, key2, key3) {
return localStorageService.remove(key1, key2, key3);
}
});
`
$3
Remove all data for this app from local storage.
If local storage is not supported, use cookies instead.
Note: Optionally takes a regular expression string and removes matching.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function clearNumbers(key) {
return localStorageService.clearAll(/^\d+$/);
}
//...
function clearAll() {
return localStorageService.clearAll();
}
});
`
$3
Bind $scope key to localStorageService.
Usage:
key: The corresponding key used in local storage
Returns: deregistration function for this listener.
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
localStorageService.set('property', 'oldValue');
$scope.unbind = localStorageService.bind($scope, 'property'); //Test Changes
$scope.update = function(val) {
$scope.property = val;
$timeout(function() {
alert("localStorage value: " + localStorageService.get('property'));
});
}
//...
});
`
html
{{property}}
`$3
Return the derive key
Returns
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
localStorageService.set('property', 'oldValue');
//Test Result
console.log(localStorageService.deriveKey('property')); // ls.property
//...
});
`
$3
Return localStorageService.length, ignore keys that not owned.
Returns
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
var lsLength = localStorageService.length(); // e.g: 7
//...
});
`
Cookie
Deal with browser's cookies directly.
cookie.isSupported
Checks if cookies are enabled in the browser.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
if(localStorageService.cookie.isSupported) {
//...
}
//...
});
`
$3
Directly adds a value to cookies.
Note: Typically used as a fallback if local storage is not supported.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function submit(key, val) {
return localStorageService.cookie.set(key, val);
}
//...
});
`
Cookie Expiry Pass a third argument to specify number of days to expiry
js
localStorageService.cookie.set(key,val,10)
`
sets a cookie that expires in 10 days.
Secure Cookie Pass a fourth argument to set the cookie as secure W3C
js
localStorageService.cookie.set(key,val,null,false)
`
sets a cookie that is secure.
$3
Directly get a value from a cookie.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function getItem(key) {
return localStorageService.cookie.get(key);
}
//...
});
`
$3
Remove directly value from a cookie.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function removeItem(key) {
return localStorageService.cookie.remove(key);
}
//...
});
`
$3
Remove all data for this app from cookie.
Returns:
js
myApp.controller('MainCtrl', function($scope, localStorageService) {
//...
function clearAll() {
return localStorageService.cookie.clearAll();
}
});
`Check out the full demo at http://gregpike.net/demos/angular-local-storage/demo.html
Development:
* Don't forget about tests.
* If you're planning to add some feature please create an issue before.Clone the project:
sh
$ git clone https://github.com//angular-local-storage.git
$ npm install
$ bower install
`
Run the tests:
sh
$ grunt test
`
Deploy:
Run the build task, update version before(bower,package)
sh
$ npm version patch|minor|major
$ grunt dist
$ git commit [message]
$ git push origin master --tags
``[npm-image]: https://img.shields.io/npm/v/angular-local-storage.svg?style=flat-square
[npm-url]: https://npmjs.org/package/angular-local-storage
[travis-image]: https://img.shields.io/travis/grevory/angular-local-storage.svg?style=flat-square
[travis-url]: https://travis-ci.org/grevory/angular-local-storage
[coveralls-image]: https://img.shields.io/coveralls/grevory/angular-local-storage.svg?style=flat-square
[coveralls-url]: https://coveralls.io/r/grevory/angular-local-storage
[david-image]: http://img.shields.io/david/grevory/angular-local-storage.svg?style=flat-square
[david-url]: https://david-dm.org/grevory/angular-local-storage
[license-image]: http://img.shields.io/npm/l/angular-local-storage.svg?style=flat-square
[license-url]: LICENSE
[downloads-image]: http://img.shields.io/npm/dm/angular-local-storage.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/angular-local-storage
[gitter-image]: https://badges.gitter.im/Join%20Chat.svg
[gitter-url]: https://gitter.im/grevory/angular-local-storage?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge