A little help with storing an array with native storage

Ionic Framework ionic-v3
1

Hello, it’s me again with another hangup I can’t seem to be able to solve. I feel really stupid, I can tell you that.

I’m trying to save an array to the native storage so it doesn’t get destroyed everytime I close the page.
This is how I’m doing it right now (it’s obviously wrong).

export interface Routine
{
  name:string;
  weight: number;
  reps: number;
}

@Component({
  selector: 'page-routine',
  templateUrl: 'routine.html'
})

export class RoutinePage
{
  routines = [] as Routine[];

  constructor(public navCtrl: NavController, public toastCtrl: ToastController, public alertCtrl: AlertController, public platform: Platform, private natStorage: NativeStorage)
  {
      this.getRoutines();
  }

  public setRoutines(): void
  {
    this.natStorage.setItem("RoutineKey", this.routines);
  }

  public getRoutines():void
  {
    this.routines= null;
    this.natStorage.getItem("RoutineKey").then((data => this.routines.push(data)));
  }


  addRoutine(rname): void
  {
    this.routines.push({name: rname, weight: 0, reps: 0});
    this.setRoutines();
  }

  presentRoutineDialog(): void
  {
    let alert = this.alertCtrl.create({
      title: 'Add new routine',
      message: 'Enter a name for the new routine',
      inputs: [
        {
          name: 'routine',
          placeholder: 'Routine'
        },
      ],
      buttons: [
        {
          text: 'Cancel',
          handler: () => {
            console.log('Cancel clicked');
          }
        },
        {
          text: 'Save',
          handler: data => {
            this.addRoutine(data.routine);
          }
        }
      ]
    });
    alert.present();
  }

  weightToast(variable)
  {
    let toast = this.toastCtrl.create({
      message: 'Weight modified to  '+variable,
      duration: 3000
    });
    toast.present();
  }

  repToast(variable)
  {
    let toast = this.toastCtrl.create({
      message: 'Reps modified to  '+variable,
      duration: 3000
    });
    toast.present();
  }
}

So, I want to save the “routines” array and load it in when the page gets constructed. This is because I want to have the page populated with components (using *ngFor() in the HTML) when it loads.
What happens right now is that when I want to load the page, it just doesn’t want to load.
I’ve checked the chrome logs:

07-28 01:06:41.269 11541 11541 D SystemWebChromeClient: ng:///IonicModule/AlertCmp.ngfactory.js: Line 612 : ERROR CONTEXT
07-28 01:06:41.269 11541 11541 I chromium: [INFO:CONSOLE(612)] “ERROR CONTEXT”, source: ng:///IonicModule/AlertCmp.ngfactory.js (612)
07-28 01:06:41.464 11541 11541 D SystemWebChromeClient: ng:///IonicModule/AlertCmp.ngfactory.js: Line 612 : ERROR
07-28 01:06:41.464 11541 11541 I chromium: [INFO:CONSOLE(612)] “ERROR”, source: ng:///IonicModule/AlertCmp.ngfactory.js (612)
07-28 01:06:41.465 11541 11541 D SystemWebChromeClient: ng:///IonicModule/AlertCmp.ngfactory.js: Line 612 : ERROR CONTEXT
07-28 01:06:41.465 11541 11541 I chromium: [INFO:CONSOLE(612)] “ERROR CONTEXT”, source: ng:///IonicModule/AlertCmp.ngfactory.js (612)
07-28 01:06:41.729 11541 11541 D SystemWebChromeClient: ng:///IonicModule/AlertCmp.ngfactory.js: Line 612 : ERROR
07-28 01:06:41.729 11541 11541 I chromium: [INFO:CONSOLE(612)] “ERROR”, source: ng:///IonicModule/AlertCmp.ngfactory.js (612)
07-28 01:06:41.730 11541 11541 D SystemWebChromeClient: ng:///IonicModule/AlertCmp.ngfactory.js: Line 612 : ERROR CONTEXT
07-28 01:06:41.731 11541 11541 I chromium: [INFO:CONSOLE(612)] “ERROR CONTEXT”, source: ng:///IonicModule/AlertCmp.ngfactory.js (612)

To be quite honest, I have 0 clue as to what that means.
I’m like 99% sure it has something to do with how I get/set the routines array. But I have no idea how to fix it, so please help me. What I’m doing right now is admittedly just an unfortunate mashing together of (outdated) tutorials on youtube and the docs and some SO/this forum -questions.

Daniel

2

Is your goal just to save the information when you close a page? If so, it’s simpler and faster to create a provider that stores the information. If you need the information to persist even when the user exists the app, then writing to local storage makes sense. But if you only need data to survive longer than a page, writing to local storage will work, but it’s slower than using a provider.

1 Like
3

Thank you for such a dead-on response.

4

That kinda IS my goal, but I also want to have the array saved so the page info survives the app being restarted.
I guess I should have been more specific. My goal is to store the array in the native storage so that it persists.

5