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

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 函数移动到您的 Controller :

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

并在 HTML 中连接 ng-click:

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

这是一个工作 Demo Plunker