本地存儲數據返回 Undefined 或 Null

Question

我是 Ionic 的新手，我正在嘗試使用本地存儲，我的問題如下......

我有一個登錄表單，當登錄成功時，它將服務器響應中的一些數據存儲到本地存儲，然后重定向到主頁。 當主頁啟動 ngOnInit 時，我試圖從本地存儲中檢索數據並將其顯示在我的 Html 文件上的一個名為 customerData 的變量上。 但是在記錄之后，應該顯示用戶數據的變量 customerData 第一次是空白的，並且使用控制台日志查看值顯示為未定義。

但是當我在成功登錄后檢查本地存儲中的數據時，我需要的所有客戶端信息都被存儲並在那里。

當我刷新頁面時，它會顯示一切應有的樣子。

我認為這與我嘗試在頁面上顯示它時 localStorage 上的值未准備好有關，當我刷新頁面時，現在一切都准備好了。

拜托我需要你的幫忙。 我的代碼如下。

登錄.ts

  loginForm(){
    this.platform.ready().then(() => {
      if((this.password != '') &&  (this.CFS.validateEmail(this.email))) {


        this.auth.loginCustomer(this.email,this.password).then((response) => {
        if(response['token']){

        console.log('Returned Token: ',response['token']);
        console.log('Returned user enamil: ',response['user_email']);   

          this.auth.getUserData(this.email).subscribe((userData) => {
          this.customerData =  userData;
           console.log('Customer Data: ', this.customerData);
          let currentUserId = this.customerData[0].id;
          localStorage.setItem('currentUserId', currentUserId);

          if(currentUserId){
            let found = localStorage.getItem('currentUserId');
            console.log('local storage id', found);
          }

           this.CFS.presentToast('Login successful', 'buttom',2000, 'success');


        });


          this.route.navigateByUrl('/home');

      } else {
        this.CFS.presentToast('Invalid username or password', 'buttom',2000,'danger');

      } 
    });
      } else {
        this.CFS.presentToast('Please fill  the form correctly', 'buttom',2000,'danger');

      }
    });

  }

主頁.ts

customerData: any ;
 ngOnInit() {  

      let isUserLoggedIn = localStorage.getItem('currentUserId');

      this.WC.getUserInfo(isUserLoggedIn).subscribe((data)=>{

        this.customerData = data;
        console.log('user data', this.customerData);
      }); 
}

Answer 1

您應該在訂閱中導航，因為您在完成登錄 function 之前正在導航。 請記住，訂閱是一種異步方法。

因此，當您到達主頁時，可能尚未將數據保存在 localStorage 中。

https://stackblitz.com/edit/ionic-64qb9r?file=app%2Fapp.component.ts

Answer 2

subscribe方法調用里面的function在接收到服務器應答后（異步）執行。 因此，導航到主頁的代碼在服務器響應后執行的代碼之前執行。 你應該移動this.route.navigateByUrl('/home'); 訂閱回調方法內的行如下：

 loginForm(){
    this.platform.ready().then(() => {
      if((this.password != '') &&  (this.CFS.validateEmail(this.email))) {


        this.auth.loginCustomer(this.email,this.password).then((response) => {
        if(response['token']){

        console.log('Returned Token: ',response['token']);
        console.log('Returned user enamil: ',response['user_email']);   

          this.auth.getUserData(this.email).subscribe((userData) => {
          this.customerData =  userData;
           console.log('Customer Data: ', this.customerData);
          let currentUserId = this.customerData[0].id;
          localStorage.setItem('currentUserId', currentUserId);

          if(currentUserId){
            let found = localStorage.getItem('currentUserId');
            console.log('local storage id', found);
          }

           this.CFS.presentToast('Login successful', 'buttom',2000, 'success');

           this.route.navigateByUrl('/home');

        });


      } else {
        this.CFS.presentToast('Invalid username or password', 'buttom',2000,'danger');

      } 
    });
      } else {
        this.CFS.presentToast('Please fill  the form correctly', 'buttom',2000,'danger');

      }
    });

  }