problem while using local storage in ionic

Question

What i am trying to do- i am setting (again) some key (which are set at some other point in my application ie, Login )value pairs in local storage when a function is called. similar to reset password. and it works fine just the problem is that when on the same page if i access those items after resetting them it shows undefined. but when i do login again those values are changed and shows the latest values.

i also tried running on android device and in ionic serve and ionic lab . it never worked.

constructor(public navCtrl: NavController,
 public navParams: NavParams,
 public apiConnect:ApiIntegrationProvider,
 public loadingCtrl:LoadingController,
 public toastCtrl:ToastController,
  public storage: Storage) {

console.log(this.user_name)
this.fetchProfile();
 }

fetchProfile(){
this.user_role=localStorage.getItem("userRole");
this.user_name=localStorage.getItem("userName");
this.user_Email=localStorage.getItem("userEmail");
this.user_Mobile=localStorage.getItem("userMobile");
this.user_Avatar=localStorage.getItem("userAvatar");
this.user_Language=localStorage.getItem("userLanguage");
this.company_name=localStorage.getItem("companyName");
this.company_email=localStorage.getItem("companyEmail");
this.company_punch=localStorage.getItem("companyPunch");
this.company_url=localStorage.getItem("companyUrl");
console.log("user data")
console.log("company name", this.company_name,"email",this.company_email,"punch",this.company_punch,"website", this.company_url,"language", this.user_Language);
if(this.user_Language=='pt'){
  this.language="Portuguese"
}else{
  this.language="English"
}
if(this.user_role=='25'){ 
this.role='Inspector';

}else if(this.user_role=='35'){
this.role='Team Lead';
 }else if(this.user_role=='45'){
 this.role='Moderator';
}else if(this.user_role=='55'){
  this.role='Administrator';
}else if(this.user_role=='65'){
  this.role='Super Administrator';
}

}




 editProfile(){
console.log(this.decideEditProfile);
console.log("edit profile function")
this.decideEditProfile=true;

  }



  SaveProfile(){
    console.log(this.decideEditProfile);
    console.log("edit profile function")
    this.decideEditProfile=false;
    this.useredit();
  }

   ionViewDidLoad() {

  console.log('ionViewDidLoad ProfilePage');

  }
  showToast(position: string) {
    let toast = this.toastCtrl.create({
      message: this.editStatus.message,
      duration: 2000,
      position: 'top'
    });
    toast.present(toast);
  }
  useredit() {
    const loader = this.loadingCtrl.create({
      content: "Please wait...",
      duration: 3000
    });
    loader.present();
    let passingValue = {
      "user_id": '3',
      "inputName": 'James Red',
      "inputEmail":'moderator@gmail.com.in',
      "inputPassword":'123456'
    }
     this.apiConnect.postEditProfile( 
  JSON.stringify(passingValue)).subscribe((data) => {
  console.log("login api "+JSON.stringify(data));

  this.editStatus = data;
  if (this.editStatus.status == "success") {
    localStorage.removeItem("userName");
    localStorage.removeItem("userEmail");
    localStorage.removeItem("userMobile");
    localStorage.removeItem("userAvatar");
    localStorage.removeItem("userLanguage");
    localStorage.setItem("userName",this.editStatus.Profile.fullName);
    localStorage.setItem("userEmail",this.editStatus.Profile.emailAddress);
    localStorage.setItem("userMobile",this.editStatus.Profile.mobile);
    localStorage.setItem("userAvatar",this.editStatus.Profile.avatar);
    localStorage.setItem("userLanguage",this.editStatus.Profile.languagePreference);

    this.showToast('top');
    this.navCtrl.push("DashBoardPage");
  }
  else {

    this.showToast('top');
  }
  loader.dismiss();
})

}

Answer 1

From your question you are trying to say that even after updating the localstorage you are getting the old value or undefined . So it might be possible that the data which you are returning may be null or empty. You have to carefully debug your application because localstorage do not work this same way. Do a console test.

Also in this piece of code :

if (this.editStatus.status == "success") {
    localStorage.removeItem("userName");
    localStorage.removeItem("userEmail");
    localStorage.removeItem("userMobile");
    localStorage.removeItem("userAvatar");
    localStorage.removeItem("userLanguage");
    localStorage.setItem("userName",this.editStatus.Profile.fullName);
    localStorage.setItem("userEmail",this.editStatus.Profile.emailAddress);
    localStorage.setItem("userMobile",this.editStatus.Profile.mobile);
    localStorage.setItem("userAvatar",this.editStatus.Profile.avatar);
    localStorage.setItem("userLanguage",this.editStatus.Profile.languagePreference);

    this.showToast('top');
    this.navCtrl.push("DashBoardPage");
  }

You do not have to remove the items unnecessarily you can just set the localstorage and the old values will be replaced by the new values.

I hope this helps you. Thanks!