Angular/Ionic Storage, how to store data dynamically

Question

So I have some code that allows a user to pick a contact and that data gets parsed into an array. however, the problem is there is no way of storing that data permanently, as the user leaves the component the data disappears.

I have been trying to use Ionic storage to store that data, but my knowledge is lacking in how to do this properly.

here is the relevant code.

export class ContactComponentComponent implements OnInit {

  constructor(private contacts: Contacts, private storage: Storage) {
   this.getContact();
  }

  mContacts = [
   {
    id: [0],
    name: '',
    number: ''
   },
   {
    id: [1],
    name : [''],
    number: ['']
   },
   {
    id: [2],
    name : [''],
    number: ['']
   },
   {
    id: [3],
    name : [''],
    number: ['']
   },
   {
    id: [4],
    name : [''],
    number: ['']
   }
  ];

  ngOnInit() {}

  pickContact(contactId) {
    this.contacts.pickContact().then((contact) => {
      this.mContacts[contactId].name = contact.name.givenName;
      this.mContacts[contactId].number = contact.phoneNumbers[0].value;
      this.storage.set('contact-name', JSON.stringify(this.mContacts.name));
      this.storage.set('contact-number',  JSON.stringify(this.mContacts.number));
    });
  }

  getContact()
  {
    this.storage.get('contact-name').then((val) => {
      console.log('Contact Name: ', val);
    });
    this.storage.get('contact-number').then((val) => {
      console.log('Contact Number:', val);
    });
  }

}

Here is the HTML

<ion-list>

  <ion-grid>
    <ion-row>
      <ion-col>
        <ion-item-group   *ngFor="let contacts of mContacts">
          <ion-card (click) = "pickContact(contacts.id)">
              <ion-item lines = "none">             
                  <ion-label class="ion-text-wrap">Name: {{contacts.name}}</ion-label>        
                </ion-item>
                <ion-item lines = "none" >
                  <ion-label class="ion-text-wrap">Number: {{contacts.number}}</ion-label>
                </ion-item>       
          </ion-card>            
        </ion-item-group>    

      </ion-col>
    </ion-row>

  </ion-grid>
</ion-list>

I know this is terrible code, but I have no idea how to save this array after the user has selected it and retrieve it, when the component is called

Answer 1

I finally discovered an answer, Hope this helps someone.

  constructor(private contacts: Contacts, private storage: Storage) {
   this.getContact();
  }
  key:string = "contacts";
  mContacts = [
   {
    id: [0],
    name: '',
    number: ''
   },
   {
    id: [1],
    name : [''],
    number: ['']
   },
   {
    id: [2],
    name : [''],
    number: ['']
   },
   {
    id: [3],
    name : [''],
    number: ['']
   },
   {
    id: [4],
    name : [''],
    number: ['']
   }
  ];

  ngOnInit() {}

  pickContact(contactId) {

    this.contacts.pickContact().then((contact) => {
      this.mContacts[contactId].name = contact.name.givenName;
      this.mContacts[contactId].number = contact.phoneNumbers[0].value;
      this.saveContacts();
    });
  }
  saveContacts(){
    this.storage.set(this.key, JSON.stringify(this.mContacts));
  }
  getContact()
  {
    this.storage.get(this.key).then((val) => {
      console.log('Contact Name: ', val);
      if (val != null && val !== undefined) {
        this.mContacts = JSON.parse(val);
      }
    });

  }


}