¿Cómo almaceno datos en el almacenamiento local usando Angularjs?

Actualmente estoy usando un servicio para realizar una acción, es decir, recuperar datos del servidor y luego almacenarlos 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?

Este es un poco de mi código que almacena y recupera al 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;
}]);

Si utiliza $window.localStorage.setItem(key,value)para almacenar, $window.localStorage.getItem(key)recuperar y $window.localStorage.removeItem(key)eliminar, puede acceder a los valores en cualquier página.

Tienes que pasar el $windowservicio al controlador. Aunque en JavaScript, el windowobjeto está disponible globalmente.

Al usar $window.localStorage.xxXX()el usuario tiene control sobre el localStoragevalor. El tamaño de los datos depende del navegador. Si solo usa $localStorage, el valor permanece mientras 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 $localStoragevalor se pierde en la página siguiente.

Para el almacenamiento local, hay un módulo para ver la siguiente URL:

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/

Úselo ngStoragepara todas sus necesidades de almacenamiento local de AngularJS. Tenga en cuenta que esto NO es una parte nativa del marco Angular JS.

ngStorage contiene dos servicios $localStoragey$sessionStorage

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

Mira la demo

Hay un módulo alternativo más que tiene más actividad que ngStorage

almacenamiento local angular:

https://github.com/grevory/angular-local-storage

Puedes usar localStoragepara el propósito.

Pasos:

1. agregue ngStorage.min.js en su archivo
2. agregue dependencia ngStorage en su módulo
3. agregue el módulo $ localStorage en su controlador
4. use $ localStorage.key = value

Creé (otro) servicio de almacenamiento angular html5. Quería mantener las actualizaciones automáticas posibles ngStorage, pero hacer que los ciclos de resumen sean más predecibles / intuitivos (al menos para mí), agregar eventos para manejar cuando se requieren recargas de estado y también agregar almacenamiento de sesión compartida entre pestañas. Modelé la API después $resourcey 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 es aquí .

Repo está aquí .

Espero que ayude a alguien!

Siga los pasos para almacenar datos en Angular - almacenamiento local:

1. Agregue 'ngStorage.js' en su carpeta.

2. Inyecte 'ngStorage' en su angular.module

       eg: angular.module("app", [ 'ngStorage']);

3. Agregue $localStoragesu función app.controller

4.Usted puede usar $localStoragedentro de su controlador

Eg: $localstorage.login= true;

Lo anterior almacenará el almacenamiento local en la aplicación de su navegador

Dependiendo de sus necesidades, por ejemplo, si desea permitir que los datos caduquen o establecer limitaciones en la cantidad de registros que se almacenarán, también puede consultar https://github.com/jmdobry/angular-cache que le permite definir si el caché se encuentra en la memoria, localStorage o sessionStorage.

Uno debería usar un script de terceros para esto llamado ngStorage. Aquí hay un ejemplo de cómo usarlo. Actualiza localstorage 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>