Currently I am using a service to perform an action, namely retrieve data from the server and then store the data on the server itself.
Instead of this, I want to put the data into local storage instead of storing it on the server. How do I do this?
This question is related to
angularjs
If you use $window.localStorage.setItem(key,value) to store,$window.localStorage.getItem(key) to retrieve and $window.localStorage.removeItem(key) to remove, then you can access the values in any page.
You have to pass the $window service to the controller. Though in JavaScript, window object is available globally.
By using $window.localStorage.xxXX() the user has control over the localStorage value. The size of the data depends upon the browser. If you only use $localStorage then value remains as long as you use window.location.href to navigate to other page and if you use <a href="location"></a> to navigate to other page then your $localStorage value is lost in the next page.
For local storage there is a module for that look at below url:
https://github.com/grevory/angular-local-storage
and other link for HTML5 local storage and angularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
One should use a third party script for this called called ngStorage here is a example how to use.It updates localstorage with change in scope/view.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- CDN Link -->
<!--https://cdnjs.cloudflare.com/ajax/libs/ngStorage/0.3.6/ngStorage.min.js-->
<script src="angular.min.js"></script>
<script src="ngStorage.min.js"></script>
<script>
var app = angular.module('app', ['ngStorage']);
app.factory("myfactory", function() {
return {
data: ["ram", "shyam"]
};
})
app.controller('Ctrl', function($scope, $localStorage, $sessionStorage, myfactory) {
$scope.abcd = $localStorage; //Pass $localStorage (or $sessionStorage) by reference to a hook under $scope
// Delete from Local Storage
//delete $scope.abcd.counter;
// delete $localStorage.counter;
// $localStorage.$reset(); // clear the localstorage
/* $localStorage.$reset({
counter: 42 // reset with default value
});*/
// $scope.abcd.mydata=myfactory.data;
});
</script>
</head>
<body ng-app="app" ng-controller="Ctrl">
<button ng-click="abcd.counter = abcd.counter + 1">{{abcd.counter}}</button>
</body>
</html>
I authored (yet another) angular html5 storage service. I wanted to keep the automatic updates made possible by ngStorage, but make digest cycles more predictable/intuitive (at least for me), add events to handle when state reloads are required, and also add sharing session storage between tabs. I modelled the API after $resource and called it angular-stored-object. It can be used as follows:
angular
.module('auth', ['yaacovCR.storedObject']);
angular
.module('auth')
.factory('session', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject('session');
}
API is here.
Repo is here.
Hope it helps somebody!
You can use localStorage for the purpose.
Steps:
Use ngStorage For All Your AngularJS Local Storage Needs. Please note that this is NOT a native part of the Angular JS framework.
ngStorage contains two services, $localStorage and $sessionStorage
angular.module('app', [
'ngStorage'
]).controller('Ctrl', function(
$scope,
$localStorage,
$sessionStorage
){});
Check the Demo
Depending on your needs, like if you want to allow the data to eventually expire or set limitations on how many records to store, you could also look at https://github.com/jmdobry/angular-cache which allows you to define if the cache sits in memory, localStorage, or sessionStorage.
Follow the steps to store data in Angular - local storage:
Inject 'ngStorage' in your angular.module
eg: angular.module("app", [ 'ngStorage']);
$localStorage in your app.controller function4.You can use $localStorage inside your controller
Eg: $localstorage.login= true;
The above will store the localstorage in your browser application
There is one more alternative module which has more activity than ngStorage
angular-local-storage:
Source: Stackoverflow.com