Verwenden von ngstorage für persistente Daten

Question

Ich weiß, dass es Lösungen für die Verwendung von ngstorage in unseren Anwendungen gibt, um persistente Daten auch nach der Aktualisierung verfügbar zu haben. Ich habe es heute in meiner Form zum ersten Mal versucht. Aber ich kann nicht herausfinden, wo ich falsch liege. Kann mir bitte jemand sagen, wo ich falsch liege? Außerdem suche ich nach der dauerhaften Funktionalität zum Hinzufügen und Löschen der Daten.

angular.module('myApp', ['ngStorage']) 
    .controller('AppController', ['$scope', '$localStorage', 
    '$sessionStorage', 
    function($scope,$localStorage,$sessionStorage) { 
     var self = this; 

     self.$storage = $localStorage; 

     self.user = { 
     id: null, 
     username: '', 
     address: '', 
     email: '' 
     }; 
     self.id = 4; 

     self.users = [{ 
     id: 1, 
     email: 'sam@tarly.com', 
     firstname: 'Sam', 
     lastname: 'Tarly', 
     telephone: 1234567890, 
     address: 'NY', 

     }, { 
     id: 2, 
     email: 'jon@snow.com', 
     firstname: 'Jon', 
     lastname: 'Snow', 
     telephone:, 
     address: 'The Wall', 
     }, { 
     id: 3, 
     email: 'dany@targaryen.com', 
     firstname: 'Dany', 
     lastname: 'Targaryen', 
     telephone: 1234987650, 
     address: 'NEBRASKA' 
     }]; 

     self.submit = function() { 
     if (self.user.id === null) { 
      self.user.id = self.id++; 
      alert('Added New User', self.user); 
      self.users.push(self.user); 
      $localStorage.users = self.users; 
     } else { 
      for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === self.user.id) { 
       self.users[i] = self.user; 
       break; 
      } 
      } 
      alert('User updated with id ', self.user.id); 
     } 
     self.reset(); 
     }; 

     self.edit = function(id) { 
     alert('id to be edited', id); 
     for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === id) { 
      self.user = angular.copy(self.users[i]); 
      break; 
      } 
     } 
     }; 

     self.remove = function(id) { 
     alert('id to be deleted', id); 
     for (var i = 0; i < self.users.length; i++) { 
      if (self.users[i].id === id) { 
      self.users.splice(i, 1); 
      $localStorage.users = self.users; 
      if (self.user.id === id) { //It is shown in form, reset it. 
       self.reset(); 
      } 
      break; 
      } 
     } 
     }; 

     self.reset = function() { 
     self.user = { 
      id: null, 
      username: '', 
      address: '', 
      email: '' 
     }; 
     $scope.myForm.$setPristine(); //reset Form 
     }; 

    } 
    ]); 

Plnkr Link

Answer 1

Von meinem Verständnis, für Dich ist die Frage der Wert nicht in der Tabelle gezeigt, nachdem die Daten und das Aktualisieren der Seite hinzufügen. Das Problem besteht darin, dass Sie die Daten zunächst mit einem statischen Array-Wert laden. Die Daten werden tatsächlich dem Speicher hinzugefügt. Sie müssen nur die Erstladung von $localStorage aufrufen. Ändern Sie einfach die self.users = [{..}] zu self.users = $localStorage.users. Ich habe den Plunkr aktualisiert. Bitte sehen Sie es sich an.

Plunkr