Setting and Getting object from storage!

I have this sample login page where I am trying to store the returned object of data (user data) to a storage so i can get it and use it in other pages… since the data is in form of json Object (array) … im not sure how this is done , i tried stringify it but something is wrong!

login.ts

          @Component({
            selector: 'page-login',
            templateUrl: 'login.html'
            })
              export class LoginPage {

               login: {username?: string , password?: string} = {};
               submitted = false;
               loginDetails: any;



              constructor(public navCtrl: NavController, private schoolAppUsers: SchoolAppUsers, 
              public userData: UserData, public storage: Storage, public globalService: GlobalService ) {

              this.globalService=globalService;
              this.schoolAppUsers=schoolAppUsers;
              this.userData=userData;
             } 

              onLogin(form) {

              this.submitted = true;
  
                if (form.valid) {
    
                  this.schoolAppUsers.login(this.login)
                 .then(loginDetails => {
     
                  this.loginDetails = loginDetails;
                  this.navCtrl.setRoot(TabsPage);
                    // console.log(loginDetails);
                });

                  this.userData.login(this.login.username);
                  this.userData.loginDetails(this.loginDetails);
   
          }
       }
     }

when I console log: //console.log(loginDetails); this is the output (object):
[{“error”:“false”,“UserID”:1,“name”:“yasir”,“username”:“yasir12”,“password”:“123”,“role”:1}]

so Im trying to pass it: this.userData.loginDetails(this.loginDetails);

userData.ts

     @Injectable()
     export class UserData {
         constructor(public events: Events, public storage: Storage) {}
          
          loginDetails(loginDetails) {
              this.setLoginDetails(loginDetails);
          };
        
         setLoginDetails(loginDetails) {
             this.storage.set('loginDetails', JSON.stringify(loginDetails));
            };

         getLoginDetails() {
           return this.storage.get('loginDetails').then((value) => {
           return value && JSON.parse(value);
            });
         };

this is how i am trying to get in other pages , which when i console log it return “null”

     ngAfterViewInit() {
        this.getUserdetails();
     }

     getUserdetails() {
        this.userData.getLoginDetails().then((loginDetails) => {
       this.loginDetails = loginDetails;
       console.log(this.loginDetails);
        });
    }

most probably something wrong in userData.ts
can someone help plz, thanx