Currently, I am utilizing Angular 2 (Typescript) to code my webpage, which features various forms with inputs. Upon submitting these forms, they each trigger a function that adds a new instance of an object based on the inputs to an array. This array is then used to generate a table on the page. My concern is how to permanently save these changes in the array even after the page is refreshed. The array labeled DPS is imported from another directory. Furthermore, the submitForm function resides within a separate Typescript file of a component distinct from the main page's HTML and remaining Typescript. Below, you will find my implementation of onload="myFunction()" for the overall container section on the main page, along with the accompanying myFunction() function.
Below is the function responsible for adding to the array:
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));
}
Main page div element:
<div class="container-fluid page" onload="myFunction()">
Implementation of myFunction():
myFunction(){
let DPS = localStorage.getItem("DPS");
if (DPS) {
localStorage.removeItem("DPS");
DPS = JSON.parse(DPS);
}
}