Issue with accessing storage in Ionic Storage (Angular)

Question

Issue with accessing storage in Ionic Storage (Angular)

Currently, I am attempting to utilize Ionic storage for the purpose of saving and loading an authentication token that is necessary for accessing the backend API in my application. However, I am encountering difficulties retrieving the value from storage.

Following the instructions on the component GH page: https://github.com/ionic-team/ionic-storage, I have successfully installed ionic storage (Angular version) using the command below:

npm install @ionic/storage-angular

Subsequently, I imported the storage service into my Globals service, which I established as a centralized repository for all global values within 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();        
    }

    (...)

Furthermore, I designed a saveToken function that aims to store the authentication token, already specified within _authenticationToken through 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(value => console.log("token saved."));
}

Upon executing the saveToken function, the outcome is as follows (Disregard the red lines, they pertain to other processes as saveToken operates asynchronously):

https://i.sstatic.net/C3LzI.png

Consequently, the token was successfully saved, with its value visible within the Application Tab in Chrome Dev Tools:

https://i.sstatic.net/t5IK0.png

However, an issue arises when I attempt to retrieve the saved token utilizing the subsequent method, yielding a null value as if the token had not been saved. This action is intended for reinstating the login session when the application is reopened:

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

The aforementioned code leads to the following messages, indicating a failure to retrieve any value from storage:

https://i.sstatic.net/yfxTI.png

While operating the application on the Chrome browser using ionic serve, I initially suspected that the storage might be resetting upon app reloads. Nevertheless, after inspecting the Application Tab, I confirmed that the Authentication Token remains intact.

angular typescript ionic-framework ionic-storage

Answer 1

Answer №1

I encountered a similar issue and was able to resolve it using the following approach:

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 retrieve the token, I utilize a guard in my case:

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 2

I encountered a similar issue and was able to resolve it using the following approach:

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 retrieve the token, I utilize a guard in my case:

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

Answer №2

Allow me to present a potential solution and then provide an explanation:

public fetchToken(callback: (response?: any) => void) : void
{
    this.storage.retrieve("AuthenticationToken")
        .then(data => {
            this.setToken(data);
            callback(data);
        });
}
...

this.fetchToken((response?: any) => {
     // your response here
});

Utilizing a callback is one way to obtain the result without altering your internal procedures.

Your inability to retrieve anything stems from attempting to return an asynchronous outcome (a promise) and then(); will consistently yield null. Your answer can be found within the 'then' block.

An alternative approach is as follows (though you will need to integrate the logic where it is called):

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

const token = await fetchToken(); // await simplifies the use of 'then()', ensuring you must wait for the result before proceeding.
this.setToken(token);

Sincere regards.

Answer 4

Allow me to present a potential solution and then provide an explanation:

public fetchToken(callback: (response?: any) => void) : void
{
    this.storage.retrieve("AuthenticationToken")
        .then(data => {
            this.setToken(data);
            callback(data);
        });
}
...

this.fetchToken((response?: any) => {
     // your response here
});

Utilizing a callback is one way to obtain the result without altering your internal procedures.

Your inability to retrieve anything stems from attempting to return an asynchronous outcome (a promise) and then(); will consistently yield null. Your answer can be found within the 'then' block.

An alternative approach is as follows (though you will need to integrate the logic where it is called):

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

const token = await fetchToken(); // await simplifies the use of 'then()', ensuring you must wait for the result before proceeding.
this.setToken(token);

Sincere regards.

Answer 5

Answer №3

Encountering a similar issue with storage while using a service, I managed to resolve it as follows:

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;
}

Following these steps helped me overcome the undefined storage response issue.

Sharing in hopes that it may be helpful to others :)

Answer 6

Encountering a similar issue with storage while using a service, I managed to resolve it as follows:

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;
}

Following these steps helped me overcome the undefined storage response issue.

Sharing in hopes that it may be helpful to others :)

Issue with accessing storage in Ionic Storage (Angular)

Answer №1

Answer №2

Answer №3

Similar questions

Differences between ng build --prod and ng --build aot in Angular 7

Mastering the art of leveraging generics in conjunction with ngrx actions

Angular Universal: Execution of ngAfterViewInit occurring on the server side rather than the client side

Display a loading indicator when loading a lazy loaded module in Angular 2

Displaying HTML content using Typescript

The pagination in React using React Query will only trigger a re-render when the window is in

A guide on implementing a "Select All" trigger in mat-select with Angular8/Material

Tips for retrieving the value from an angular tag using Selenium

Update the Angular material table with the set filtered results

Managing Scroll Behavior in Ionic

What is the proper way to conduct unit testing on a function that is invoked in a service's constructor

Angular error: Attempting to reduce an empty array without an initial value

Execution of the RxJS pipe Finalize operator initiated prior to Observable finalization

What situations call for the use of 'import * as' in TypeScript?

Unusual behavior when importing in Angular 2 using TypeScript

Deleting and inserting an element in the Document Object Model

Error: Trying to break down a non-iterable object is not valid

Issue detected in rxjs-compat operator's shareReplay file at line 2, column 10:

The type '{ children: Element; }' cannot be assigned to the type 'IntrinsicAttributes & ReactNode'

The issue arises when attempting to update the input of a child component within a reactive form during the OnInit lifecycle