Ionic SecureStorage. Taking multiple input values? Please help

Hi, I’m trying to take multiple user inputs and store them into SecureStorage. I was able to take just 2 inputs, and it works, but what if I want to take more than 2 inputs? Here is the code to take 2 inputs:

securestorage.component.ts file:

import { Component, OnInit } from '@angular/core';
import { SecureStorage, SecureStorageObject } from '@ionic-native/secure-storage/ngx';
import { KeyValue } from '../../keyValue';

@Component({
  selector: 'app-securestorage',
  templateUrl: './securestorage.component.html',
  styleUrls: ['./securestorage.component.scss'],
})
export class SecurestorageComponent implements OnInit {

  msg = 'SecureStorge...';
  inKey;
  inValue;
  keys: any[];
  values: KeyValue[] = new Array();

  constructor(private secureStorage: SecureStorage) {
    this.secureStorage.create('storage').then((storage: SecureStorageObject) => {
      console.log('SecureStorageopened/created');
    });
  }

  showAll() {
    this.values = [];
    this.secureStorage.create('storage').then((storage: SecureStorageObject) => {
      storage.keys().then(data => {
        this.keys = data;
        for (let i = 0; i < this.keys.length; i++) {
          storage.get(this.keys[i]).then(d2 => {
            this.values[i] = { key: this.keys[i], value: d2 };
          },
            error => console.log('Geterror:' + error));
        }

      },
        error => console.log('showAllerror:' + error)
      );
    });
  }

  addRec() {
    this.secureStorage.create('storage').then((storage: SecureStorageObject) => {
      storage.set(this.inKey, this.inValue).then(data => {
        this.msg = 'Recordinserted';
      },
        error => { this.msg = 'RecordNOTinserted'; }
      );
    });
  }

  removeRec() {
    this.secureStorage.create('storage').then((storage: SecureStorageObject) => {
      storage.remove(this.inKey).then(data => {
        this.msg = 'Recorddeleted';
        this.showAll();
      },
        error => { this.msg = 'RecordNOTdeleted'; }
      );
    });
  }

  removeAll() {
    this.secureStorage.create('storage').then((storage: SecureStorageObject) => {
      storage.clear().then(data => {
        this.msg = 'Recordsdeleted';
        this.values = [];
      },
        error => { this.msg = 'RecordsNOTdeleted'; }
      );
    });
  }

  ngOnInit() { }

}

securestorage.component.html file:

{{msg}}
<ion-item>
  <ion-label>Key</ion-label>
  <ion-input type="text" [(ngModel)]="inKey"></ion-input>
  <ion-label>Value</ion-label>
  <ion-input [(ngModel)]='inValue'></ion-input><br>
</ion-item>

<ion-button (click)='addRec()'>Insert Record</ion-button>
<ion-button (click)='showAll()'>Show ALL Records</ion-button>
<br>
<ion-button (click)='removeAll()'>Remove ALL records</ion-button>
<ion-button (click)='removeRec()'>Remove ONE record</ion-button>
<br>

<ion-item *ngFor="let item of values;">
  <ion-label>{{item.key}} {{item.value}}</ion-label>
</ion-item>

I’m essentially trying to make a simple product manager type of app (not for production) that takes in:

export interface ProductValues {
    productID: string;
    desc: string;
    quantityOnHand: number;
    pricePer: number;
    reorderQuantity: number;
}

I know I can storage.set objects and I’d also have to use JSON.stringify and parse, but I’m really unsure how to go about it all. Also, if you have Discord, please reply with it, as I can send screenshots and more code a lot more easily. Thank you

I have no experience with this but I wonder firstly what the problem is your are facing and if it indeed is logic to create a storage for each method. Sounds counterintuitive.

Isnt there an example u can use?