Local storage working for first time only in ionic

Ionic Framework ionic-v3
1

Hi,
I am using local storage in my application, which works very well on the first time and on the second time it show empty otherwise it is show previous username.

Below is the code .
First page for setting data

Login.ts
if(this.responseData.result==‘true’){
localStorage.setItem(‘username’,this.userData.loginname )
this.navCtrl.push(TabsPage);
}

app_component.ts

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
public menu : MenuController ) {

this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
  { title: localStorage.getItem('username') ,component: TabsPage,icon:'ios-contact-outline' },
  { title: 'Order-id :', component:SummaryPage,icon:'ios-cart-outline' },
  { title: 'Home', component: TabsPage,icon:'ios-home-outline' },
  { title: 'Help', component: TabsPage,icon:'ios-help-circle-outline' },
  { title: 'Logout', component: null,icon:'ios-exit-outline' }
  ];
  }

initializeApp() {
this.platform.ready().then(() => {

  this.statusBar.styleDefault();
  this.splashScreen.hide();
});

}

openPage(page) {
// Reset the content nav to have just this page
// we wouldn’t want the back button to show in this scenario
if(page.component) {
this.nav.setRoot(page.component);

} else {

  this.nav.setRoot(LoginPage);
  this.menu.enable(false, 'myMenu');
localStorage.clear();

}
}
image

2

In else condition of your openPage(page) function is having the issue. localStorage is getting cleared over there. Ideally localstorage should be clear only on the click on logout.

3

In general you should use https://ionicframework.com/docs/storage/

1 Like
4

as per advice i changed but i didn’t username

constructor(public platform: Platform, public statusBar: StatusBar, public splashScreen: SplashScreen,
public menu : MenuController ) {

this.initializeApp();
// used for an example of ngFor and navigation
this.pages = [
  { title: localStorage.getItem('username') ,component: TabsPage,icon:'ios-contact-outline' },
  { title: 'Order-id :', component:SummaryPage,icon:'ios-cart-outline' },
  { title: 'Home', component: TabsPage,icon:'ios-home-outline' },
  { title: 'Help', component: TabsPage,icon:'ios-help-circle-outline' },
  { title: 'Logout', component: null,icon:'ios-exit-outline' }
  ];
  }

initializeApp() {
this.platform.ready().then(() => {
// Okay, so the platform is ready and our plugins are available.
// Here you can do any higher level native things you might need.
this.statusBar.styleDefault();
this.splashScreen.hide();
});
}
open(page) {
if(page.component) {
this.nav.setRoot(page.component);
}
}
logout(page) {
if(page.component==null) {
this.nav.setRoot(LoginPage);
this.menu.enable(false, ‘myMenu’);
localStorage.clear();
}

}

app.html


<ion-item *ngFor=“let p of pages” style=“background-color:#dedede;”>


              <button ion-button clear color="dark" (click)="logout(p)"style="background-color:#dedede;font-weight:600">
                  {{p.title | uppercase}}
              </button>
            </ion-item>
   </ion-list>
</ion-content>
5

It always show first entry after logout ,even i gave different user

6

I suggest you to start a new project using the conference example so you see a nice setup dealing with login etc

And use Ionic Storage as per earlier recommendation

7

I can recommend trying this plugin out!
Works for me like a charm, while I had trouble with Ionic storage…