即使页面刷新，也会永久更改数组

Question

我使用Angular 2 (Typescript)编写代码，在我的网页上，我有不同的表单和输入，当我提交这些表单时，它们会触发自己的函数，根据输入向数组添加对象的新实例，然后将其反映在由所述数组生成的页面上的表中。如何在刷新页面后将这些更改永久保存在数组中。阵列DPS是从其他目录导入的。submitForm函数位于组件的Typescript文件中，该组件独立于主页的Typescript和组件( HTML和其他Typescript)。下面，您将看到我在主页上对整个container和myFunction()函数使用了onload="myFunction()"。

下面是添加到数组中的函数：

submitForm(value: any){
  var val1 = String((<HTMLInputElement>document.getElementById("dataPoint")).value);
  var val2 = String((<HTMLInputElement>document.getElementById("ICCP")).value);
  var val3 = String((<HTMLInputElement>document.getElementById("startDate")).value);
  var val4 = String((<HTMLInputElement>document.getElementById("endDate")).value);
  let blah = new DataTable(val1,val2,val3,val4);
  DPS.push(blah);
  localStorage.setItem("DPS", JSON.stringify(DPS));
}

我的主页的div：

<div class="container-fluid page" onload="myFunction()">

myFunction()：

 myFunction(){
   let DPS = localStorage.getItem("DPS");
   if (DPS) {
     localStorage.removeItem("DPS");
     DPS = JSON.parse(DPS);
    }
  }

Answer 1

您可以将其保存在localStorage中

...
DPS.push(blah);
localStorage.setItem("DPS", JSON.stringfy(DPS));

在页面加载时，你可以检查你是否已经拥有它：

let DPS = localStorage.getItem("DPS");
if (DPS) {
    localStorage.removeItem("DPS");
    DPS = JSON.parse(DPS);
    // you have an intance
}

编辑

似乎在angular2中有一个用于本地存储的库：angular2-localstorage。