Javascript 加载本地存储后Angular应用程序中断

我正在开发一个简单的

angularjs

应用程序，它可以创建列表，并允许用户通过

local storage

存储列表中的任何内容。用户可以保存他们的列表，稍后从

本地存储再次打开它们，并继续向其中添加项目

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

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

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

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

我已经在上创建了一个示例

发生这种情况是因为我首先对数组进行了字符串化，然后对其进行了解析吗？
当您对数组进行JSON字符串化时，会丢失addValue函数。我修改了plunker以在按钮下方显示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>


增值

这是一张工作票