Javascript 对持久数据使用ngstorage

我知道，有一些解决方案可以解决如何在应用程序中使用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: 'sam@tarly.com',
        firstname: 'Sam',
        lastname: 'Tarly',
        telephone: 1234567890,
        address: 'NY',

      }, {
        id: 2,
        email: 'jon@snow.com',
        firstname: 'Jon',
        lastname: 'Snow',
        telephone: 9876543210,
        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
      };

    }
    ]);

angular.module（'myApp'，['ngStorage']））
.controller（'AppController'，['$scope'，'$localStorage'，'，
“$sessionStorage”，
函数（$scope、$localStorage、$sessionStorage）{
var self=这个；
self.$storage=$localStorage；
self.user={
id:null，
用户名：“”，
地址：''，
电子邮件：“”
};
self.id=4；
self.users=[{
id:1，
电邮:'sam@tarly.com',
名字：“山姆”，
姓氏：“Tarly”，
电话：1234567890，
地址：'纽约'，
}, {
id:2，
电邮:'jon@snow.com',
名字：“乔恩”，
姓：“雪”，
电话：9876543210，
地址：'墙'，
}, {
id:3，
电邮:'dany@targaryen.com',
名字：“丹妮”，
姓氏：'Targryen'，
电话：1234987650，
地址：内布拉斯加州
}];
self.submit=函数（）{
if（self.user.id==null）{
self.user.id=self.id++；
警报（'已添加新用户'，自用户'）；
self.users.push（self.user）；
$localStorage.users=self.users；
}否则{
对于（var i=0；i

---

根据我的理解，对于您来说，问题在于添加数据和刷新页面后表中未显示的值。问题是您最初加载的数据是静态数组值。数据实际上已添加到存储器中。您只需从

$localStorage

调用初始加载。只需将

self.users=[{..}]

更改为

self.users=$localStorage.users

。我已经更新了plunkr。请看一看

---

刷新页面时，您是否无法显示附加值？是的。该值正常相加或删除。但是当我重新加载页面时，没有看到值。显示了警报框，但没有将数据添加到下面的列表中。@ross:让我检查一下。请看一下这个@ross:是的，它可以工作。但是，id根本不会更新，而是保持在4。另外，您希望通过在提醒框中显示要删除的特定用户名来添加、更新和删除。@ross:请看一下这个链接。