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

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函数。我修改了你的plunker来显示按钮下方的JSON.stringified列表（你可以看到缺少addValue函数）：

因此，当列表被保存并重新加载时，列表数据将被恢复，但“addValue”函数不会被恢复。

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

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

并在HTML中连接点击：

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

这是一个工作Demo Plunker