Использование ngstorage для постоянных данных

Question

Я знаю, что есть решения, как использовать ngstorage в наших приложениях, чтобы постоянные данные были доступны даже после обновления. Я попытался реализовать это впервые в моей форме сегодня. Но не могу понять, где я иду не так. Может кто-нибудь, пожалуйста, дайте мне знать, где я иду не так? Кроме того, я ищу постоянную функциональность при добавлении и удалении данных.

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: '[e-mail]',
        firstname: 'Sam',
        lastname: 'Tarly',
        telephone: [phone],
        address: 'NY',

      }, {
        id: 2,
        email: '[e-mail]',
        firstname: 'Jon',
        lastname: 'Snow',
        telephone: [phone],
        address: 'The Wall',
      }, {
        id: 3,
        email: '[e-mail]',
        firstname: 'Dany',
        lastname: 'Targaryen',
        telephone: [phone],
        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

Насколько я понимаю, для вас проблема заключается в значении, которое не отображается в таблице после добавления данных и обновления страницы. Проблема в том, что вы изначально загружаете данные со значением статического массива. Данные фактически добавляются в хранилище. Вам просто нужно вызвать начальную загрузку с $localStorage, Просто измените self.users = [{..}] в self.users = $localStorage.users, Я обновил план. Пожалуйста, посмотрите на это.

Plunkr