Como armazenar dados no armazenamento local usando o Angularjs?

Atualmente, estou usando um serviço para executar uma ação, ou seja, recuperar dados do servidor e, em seguida, armazenar os dados no próprio servidor.

Em vez disso, quero colocar os dados no armazenamento local em vez de armazená-los no servidor. Como eu faço isso?

este é um pouco do meu código que armazena e recupera no armazenamento local. eu uso eventos de transmissão para salvar e restaurar os valores no 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;
}]);

Se você usar $window.localStorage.setItem(key,value)para armazenar, $window.localStorage.getItem(key)recuperar e $window.localStorage.removeItem(key)remover, poderá acessar os valores em qualquer página.

Você precisa passar o $windowserviço para o controlador. Embora em JavaScript,window objeto esteja disponível globalmente.

Ao usar $window.localStorage.xxXX()o usuário, você tem controle sobre o localStoragevalor. O tamanho dos dados depende do navegador. Se você usar apenas $localStorage, o valor permanecerá enquanto você usar window.location.href para navegar para outra página e se você usar <a href="location"></a>para navegar para outra página, seu $localStoragevalor será perdido na próxima página.

Para armazenamento local, há um módulo para esse olhar abaixo da URL:

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

e outro link para armazenamento local HTML5 e angularJs

http://www.amitavroy.com/justread/content/articles/html5-local-storage-with-angular-js/

Use ngStoragepara todas as suas necessidades de armazenamento local do AngularJS. Observe que essa NÃO é uma parte nativa da estrutura JS angular.

ngStorage contém dois serviços $localStoragee$sessionStorage

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

Verifique a demonstração

Há mais um módulo alternativo que possui mais atividade do que ngStorage

armazenamento local angular:

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

Você pode usar localStoragepara esse fim.

Passos:

1. adicione ngStorage.min.js ao seu arquivo
2. adicione dependência ngStorage no seu módulo
3. adicione o módulo $ localStorage no seu controlador
4. use $ localStorage.key = value

Eu criei (ainda outro) serviço de armazenamento angular html5. Eu queria manter as atualizações automáticas possíveis ngStorage, mas tornar os ciclos de digestão mais previsíveis / intuitivos (pelo menos para mim), adicionar eventos para lidar quando as recargas de estado forem necessárias e também adicionar o compartilhamento de sessões de armazenamento entre as guias. Modelei a API depois $resourcee a chamei angular-stored-object. Pode ser usado da seguinte maneira:

  angular
    .module('auth', ['yaacovCR.storedObject']);

  angular
    .module('auth')
    .factory('session', session);

  function session(ycr$StoredObject) {
    return new ycr$StoredObject('session');
  }

API está aqui .

Repo está aqui .

Espero que ajude alguém!

Siga as etapas para armazenar dados no Angular - armazenamento local:

1. Adicione 'ngStorage.js' na sua pasta.

2. Injete 'ngStorage' no seu angular.module

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

3. Adicione $localStoragesua função app.controller

4.Você pode usar $localStoragedentro do seu controlador

Eg: $localstorage.login= true;

O acima armazenará o armazenamento local no aplicativo do navegador

Dependendo de suas necessidades, como se você deseja permitir que os dados expirem ou defina limitações em quantos registros armazenar, também é possível acessar https://github.com/jmdobry/angular-cache, que permite definir se o cache fica na memória, localStorage ou sessionStorage.

Deve-se usar um script de terceiros para isso chamado ngStorage. Aqui está um exemplo de como usar. Ele atualiza o armazenamento local com alterações no escopo / exibição.

    <!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>