角应用程序在加载本地存储后中断。

Question

我正在开发一个简单的angularjs应用程序，它可以创建列表并允许用户通过local-storage在这些列表中存储任何内容。用户能够保存他们的列表，并在稍后从local-storage中再次打开它们，并继续向它们添加项。

问题是，一旦加载，用户就无法向任何列表中添加其他项。

我假设一旦加载了数据，我就不能使用相同的对象。

  this.saveLists = function() {
    localStorage["lists"] = JSON.stringify(this.lists);
  };

  this.loadLists = function() {
    this.lists = JSON.parse(localStorage['lists']);
  };

我在plunker.co创建了一个例子

发生这种情况是因为我首先对数组进行了字符串化，然后对其进行了解析？

Answer 1

当JSON对数组进行字符串化时，就会失去addValue函数。我修改了柱塞以显示按钮下面的JSON.stringified列表(您可以看到缺少addValue函数)：

​

​

因此，当列表被保存和重新加载时，列表数据会被恢复，但是'addValue‘函数不会恢复。

要使此工作，可以将addValue函数移动到控制器上：

app.controller('TempController', function($scope) {      
  ...    
  this.addValue = function(list, value){
    list.values.push(value);
  }      
}

并在HTML中连接ng-单击：

<button type="button" ng-click="tmpCtrl.addValue(list, valueTyped);valueTyped = ''">
     Add Value
</button>

这是一个工作的演示柱塞