Retaining form data after refresh or re-opening app

Hi, I’m stuck at a problem…
I have 2 forms in my app which the user has to fill…
I want my app to store the form input data the user has input to be available until he final submits both the form.
I tried using local storage and the form data persists if I fill form 1 and navigate to form2 (vice-versa) but once I re-open the app the form data is gone.
Below is my code:

export class SecOnePage {
  schoolName : any;
  addRess: any;
  direcTion: any;
  mapLoc: any;
  schoolType: any;
  typeSchool: any;
  headOrg: any;
  contSchool: any;
  contPer: any;
  eMail: any;
  mobNo: any;

  
  constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecOnePage');
  }

gotoSecII(){
    var sec1 = [
      {
        "SchoolName": this.schoolName
      },
      {
        "Address": this.addRess
      },
      {
        "Direction": this.direcTion
      },
      {
        "MapLoc": this.mapLoc
      },
      {
        "SchoolType": this.schoolType
      },
      {
        "TypeSchool": this.typeSchool
      },
      {
        "HeadOrg": this.headOrg
      },
      {
        "ContSchool": this.contSchool
      },
      {
        "ContPer": this.contPer
      },
      {
        "Email": this.eMail
      },
      {
        "MobNo": this.mobNo
      }
    ];


    // Or to get a key/value pair
    localStorage.setItem("sec1", JSON.stringify(sec1));
    sec1 = JSON.parse(localStorage.getItem("sec1"));

  
  this.navCtrl.push(SecTwoPage);
}
}

Can you post the code that saves the data to local storage?

localStorage.setItem("sec1", JSON.stringify(sec1));

I’ve given the code above @bwhiting
thanks.

Move the following line to ionViewDidLoad() function.
sec1 = JSON.parse(localStorage.getItem(“sec1”));

If you look in the devtools do you see the item saved to local storage?

I tried it moving to ion view did load but after closing the app the data was removed.
I think I have to use another variable to check if the data exists.

@bwhiting Is there any solution to this as I tried this code but still it does not work…

export class SecOnePage {
  schoolName : any;
  addRess: any;
  direcTion: any;
  mapLoc: any;
  schoolType: any;
  typeSchool: any;
  headOrg: any;
  contSchool: any;
  contPer: any;
  eMail: any;
  mobNo: any;

  
  constructor(public navCtrl: NavController, public navParams: NavParams, public loadingCtrl: LoadingController) {
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad SecOnePage');
if (localStorage.getItem('stat') == '0') {
      var sec1 = JSON.parse(localStorage.getItem("sec1"));
      this.schoolName = sec1.SchoolName;
      this.addRess = sec1.Address;
      this.direcTion = sec1.Direction;
      this.mapLoc = sec1.MapLoc;
      this.schoolType = sec1.SchoolType;
      this.typeSchool = sec1.TypeSchool;
      this.headOrg = sec1.HeadOrg;
      this.contSchool = sec1.ContSchool;
      this.contPer = sec1.ContPer;
      this.eMail = sec1.Email;
      this.mobNo = sec1.MobNo;

    }
  }

gotoSecII(){
    var sec1 = [
      {
        "SchoolName": this.schoolName
      },
      {
        "Address": this.addRess
      },
      {
        "Direction": this.direcTion
      },
      {
        "MapLoc": this.mapLoc
      },
      {
        "SchoolType": this.schoolType
      },
      {
        "TypeSchool": this.typeSchool
      },
      {
        "HeadOrg": this.headOrg
      },
      {
        "ContSchool": this.contSchool
      },
      {
        "ContPer": this.contPer
      },
      {
        "Email": this.eMail
      },
      {
        "MobNo": this.mobNo
      }
    ];


    // Or to get a key/value pair
    localStorage.setItem("sec1", JSON.stringify(sec1));
    sec1 = JSON.parse(localStorage.getItem("sec1"));

  
  this.navCtrl.push(SecTwoPage);
}
}

You can store the user data using the page event ionViewWillLeave();
So, if the user decided to close the app, or navigate away, all the data will be stored to the localStorage.

1 Like