I can't save an array in localStorage and reload it when booting up the app again.(Ionic Angular)

Issue

So I made a simple todo list with Ionic and Angular. You can add and delete things to a list, which should be visible all the time. Everything works this far except for saving the data when closing the app.

Here is my home.page.ts:

export class HomePage {
  name = '';
  namelist = Array<string>();
  
  constructor(public storage: Storage) {
    let json = JSON.stringify(this.namelist);
    localStorage.setItem('namelist', json);
    var test = localStorage.getItem('namelist');
    this.namelist = JSON.parse(test);
  }

  add() {
    if (this.name.length > 0) {
      let name = this.name;
      this.namelist.push(name);
      this.name = '';
    }
  }

  delete(index) {
    this.namelist.splice(index, 1);
  }

Solution

try this

export class HomePage {
  name = '';
  namelist = Array<string>();
  
  constructor(public storage: Storage) {
    this.getDataLocalStorage()
  }

  add() {
    if (this.name.length > 0) {
      let name = this.name;
      this.namelist.push(name);
      this.name = '';
    }
  }

  delete(index) {
    this.namelist.splice(index, 1);
  }

  updateLocalStorage(){
    localStorage.setItem('namelist', JSON.stringify(this.namelist));
  }

  getDataLocalStorage(){

    try {
      const test = localStorage.getItem('namelist');
      this.namelist = JSON.parse(test);
    } catch (error) {
      console.log(error)
    }
   
  }
}

Answered By – Aian

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0