storage.get is not working in ionic storage (angular)

Question

I'm trying to use ionic storage to save and load an authentication token I use to access the backend API in my APP, but I'm having trouble getting the value from storage.

I've installed ionic storage (Angular version), as indicated in the component GH page: https://github.com/ionic-team/ionic-storage, using the command below:

npm install @ionic/storage-angular

Then I imported the storage service in my Globals service, which I created to be a hub to all global values in my application:

import { Storage } from '@ionic/storage-angular';

@Injectable()
export class Globals {
    private _authenticationToken: string;

    constructor(private storage: Storage) {
        this._authenticationToken = null;
        this.storage.create();        
    }

    (...)

Then I created a saveToken method, that will store the authentication token, already defined in _authenticationToken by another method, in the ionic storage:

public saveToken() : Promise<void>
{
    console.log("Saving token");
    console.log(this._authenticationToken);
    return this.storage.set("AuthenticationToken", this._authenticationToken)
        .then(valor => console.log("token saved."));
}

When I execute the saveToken method, the result is this (Ignore the lines in red, they are from other process, since saveToken is async):

So my token was saved, and I can see its value in Application Tab in Chrome Dev Tools:

But here comes the problem. When I try to load the saved token, using the method bellow, I get a null value returned, as if the token was not saved. I'm doing that when the application is opened again, to recover the login session.

public loadToken() : Promise<void>
{
    return this.storage.get("AuthenticationToken")
        .then(v => {
            console.log("token loaded");
            console.log(v);
            this.setToken(v);
        });
}

The code above will result in the following messages, indicating that no value was returned from storage.

I'm running the application in chrome browser, using ionic serve, and thought that the storage could be resetting after the app reloads, but I've checked the application tab and the Authentication Token is there.

Answer 1

Before I share the possible solution and then I explain:

public loadToken(handler: (result?: any) => void) : void
{
    this.storage.get("AuthenticationToken")
        .then(v => {
            this.setToken(v);
            handler(v);
        });
}
...

this.loadToken((result?: any) => {
     // here your result
});

That's one way using a callback to get the result without moving your internal logic.

The reason you are not getting anything is because you are trying to return an asynchronous result (promise) and then(); it will always return null to you. Your result is inside the then.

Another way would be this (but you will have to migrate the logic inside from where you consume it):

public loadToken() : Promise<any>
{
    return this.storage.get("AuthenticationToken");
}
...

const token = await loadToken(); // await is a syntactic sugar, it summarizes use of then(); on one line and you must wait for the result to return before continuing.
this.setToken(token);

Best regards.

Answer 2

I had the same problem and managed to fix it like this:

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage-angular';

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  constructor(private _storage: Storage) {
    this._storage.create();
  }

  public async set(key: string, value: any) {
    await this._storage?.set(key, value);
  }

  public async get(key: string): Promise<any> {
    const data = await this._storage?.get(key);
    return data;
  }

  public async remove(key: string): Promise<void>{
    await this._storage?.remove(key);
  }

  public async clear(): Promise<void>{
    await this._storage?.clear();
  }
}

To access the token, in my case I use a guard:

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } 
from '@angular/router';
import { StorageService } from '../storage/storage.service';

@Injectable({
  providedIn: 'root'
})
export class GuardService implements CanActivate {

  constructor(private router: Router, private storage: StorageService) {}

  async canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> {
    const key = "user";
    const data = await this.storage.get(key);
    if (!data) {
      this.router.navigateByUrl('/login');
      return false;
    } else{
      this.router.navigateByUrl('/home');
      return true;
    }
  }
}

Answer 3

I had the same problem when use storage with service and fix it ike this:

storage.service.ts

 import { Injectable } from '@angular/core';
    import { Storage } from '@ionic/storage-angular';

   @Injectable({
     providedIn: 'root'
    })
   export class StorageService {
     constructor(private _storage: Storage) {
     this._storage.create();
   }

  public async set(key: string, value: any) {
    await this._storage?.set(key, value);
  }

  public async get(key: string): Promise<any> {
    const data = await this._storage?.get(key);
    return data;
  }

  public async remove(key: string): Promise<void> {
    await this._storage?.remove(key);
  }

    public async clear(): Promise<void> {
    await this._storage?.clear();
    } 
   }

app.component.ts

 public data;
 ngOnInit(): void {
this.storage.get('data').then((data) => {
  this.data = data;
}

It worked for me and storage doest return undefined anymore

Hope it will Help :)