angularjs - funciones - rootscope angular js
¿Cómo almaceno datos en el almacenamiento local usando Angularjs? (9)
Dependiendo de sus necesidades, por ejemplo, si desea permitir que los datos caduquen o establecer limitaciones sobre cuántos registros almacenar, también puede consultar https://github.com/jmdobry/angular-cache que le permite definir si la memoria caché se encuentra en la memoria, localStorage o sessionStorage.
Actualmente estoy usando un servicio para realizar una acción, es decir, recuperar datos del servidor y luego almacenar los datos en el servidor.
En lugar de esto, quiero poner los datos en el almacenamiento local en lugar de almacenarlos en el servidor. ¿Cómo hago esto?
Fui autor (otro más) del servicio de almacenamiento angular html5. Quería mantener las actualizaciones automáticas hechas posibles por ngStorage, pero hacer que los ciclos de resumen sean más predecibles / intuitivos (al menos para mí), agregar eventos para manejar cuando se requieran recargas de estado y también agregar el almacenamiento de la sesión compartida entre pestañas. Modelé la API después de $ resource y la llamé angular-stored-object. Se puede usar de la siguiente manera:
angular
.module(''auth'', [''yaacovCR.storedObject'']);
angular
.module(''auth'')
.factory(''session'', session);
function session(ycr$StoredObject) {
return new ycr$StoredObject(''session'');
}
API: http://yaacovcr.github.io/angular-stored-object/docs/#/api
Repo: https://github.com/yaacovCR/angular-stored-object
Espero que ayude a alguien!
Hay un módulo alternativo más que tiene más actividad que ngStorage
angular-local-storage:
Para el almacenamiento local, hay un módulo para esa vista en la URL siguiente:
https://github.com/grevory/angular-local-storage
y otro enlace para almacenamiento local HTML5 y angularJs
http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/
Puede usar localStorage para este propósito.
Pasos:
add ngStorage.min.js in your file
add ngStorage dependency in your module
add $localStorage module in your controller
use $localStorage.key = value
Si usa $window.localStorage.setItem(key,value) para almacenar, $window.localStorage.getItem(key) para recuperar y $window.localStorage.removeItem(key) para eliminar, entonces puede acceder a los valores en cualquier página .
Debe pasar el servicio $window al controlador. Aunque en JavaScript, el objeto window está disponible globalmente.
Al usar $window.localStorage.xxXX() el usuario tiene control sobre el valor localStorage . El tamaño de los datos depende del navegador. Si solo usa $localStorage , el valor permanece siempre que use window.location.href para navegar a otra página y si usa <a href="location"></a> para navegar a otra página, entonces su valor $localStorage se pierde en la página siguiente.
Uno debe usar un script de terceros para este llamado llamado ngStorage. Aquí hay un ejemplo de cómo usarlo. Actualiza el almacenamiento local con cambios en el alcance / vista.
<!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>
Use ngStorage para todas sus necesidades de almacenamiento local AngularJS. Tenga en cuenta que esta NO es una parte nativa del marco Angular JS.
ngStorage contiene dos servicios: $ localStorage y $ sessionStorage.
angular.module(''app'', [
''ngStorage''
]).controller(''Ctrl'', function(
$scope,
$localStorage,
$sessionStorage
){});
Verifica la Demo
esto es un poco de mi código que almacena y recupera en el almacenamiento local. utilizo eventos de difusión para guardar y restaurar los valores en el modelo.
app.factory(''userService'', [''$rootScope'', function ($rootScope) {
var service = {
model: {
name: '''',
email: ''''
},
SaveState: function () {
sessionStorage.userService = angular.toJson(service.model);
},
RestoreState: function () {
service.model = angular.fromJson(sessionStorage.userService);
}
}
$rootScope.$on("savestate", service.SaveState);
$rootScope.$on("restorestate", service.RestoreState);
return service;
}]);