Ionic storage not working in chrome browser

Question

I am new to Ionic app development and I have been following tutorials for the same.

I have been trying to use IonicStorageModule but even though there are no errors while running the app in chrome browser mobile view mode, local storage keys are not being generated.

In my app.module.ts, I have

import { IonicStorageModule } from '@ionic/storage';

Then I have the following import in imports array,

  imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot()
  ],

Now, I created a service, named user-settings.service.ts,

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

@Injectable()
export class UserSettings {
    constructor(private storage:Storage){}

    favoriteTeam(team,tournamentId, tournamentName) {
        debugger;
        let item = { team: team,tournamentId : tournamentId, tournamentName : tournamentName};
        this.storage.set('teamId' , item);
    }

    unFavoriteTeam(team) {
        this.storage.remove(team.id);
    }

    isFavoriteTeam(team) {
        return this.storage.get(team.id).then(value => value ? true : false);
    }
}

And from my component, class, when I do..

}else {
  this.isFollowing = true;
  this.userSettings.favoriteTeam(this.team,this.currentTournamentData.tournament.id,this.currentTournamentData.tournament.name);
}

Even though service, is being hit, I cannot see local stoarge keys being created in chrome application -> storage -> local storage.

What am I doing wrong ?

Answer 1

Just like you can see in the docs:

When running in the web or as a Progressive Web App, Storage will attempt to use IndexedDB, WebSQL, and localstorage, in that order.

So if you're using Chrome, check if the data is being stored in IndexedDB or in WebSQL first:

Also please notice that you're setting the data using the teamId key, like this:

this.storage.set('teamId' , item);

So in order to get that data back, you need to use the same key:

this.storage.get('teamId').then(value => value ? true : false);

And the same if you want to remove it from the storage:

this.storage.remove('teamId');