CODEWITHSUNDEEP
ionic-frameworklocal-storagestorageionic2
Manspof
Manspof

Reputation: 357

what is wrong in my storage implementation ionic 2 app?

i'm trying to save data in local storage in ionic 2 app so i import the storage and did exactly like i saw in the website and it not save the data in the storage

import { Component} from '@angular/core';

import { NavController,NavParams,LoadingController,AlertController,ViewController  } from 'ionic-angular';
import { Facebook } from 'ionic-native';

//import pages
import {LoginPage} from "../../pages/login/login";
import {User} from '../../models/user'
import { Storage} from '@ionic/storage';
//import provider
import { ProfileData } from '../../providers/profile-data';
import { NotesData } from '../../providers/notes-data';

import firebase from 'firebase'
import {AddNote} from "../add-note/add-note";

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

export class HomePage {

  pages: Array<{title: string, component: any}>;
  photo:any;




  constructor(public navCtrl: NavController,public storage:Storage) {


  }
  ionViewDidLoad() {

    this.getDetailsFacebook();
  }

  getDetailsFacebook() {
    var that=this;
    Facebook.getLoginStatus().then((response)=> {
      if (response.status == 'connected') {
        Facebook.api('/' + response.authResponse.userID + '?fields=id,name,gender', []).then((response)=> {
         that.uid = response.id;
         that.photo = "http://graph.facebook.com/"+that.uid+"/picture?type=large";
          that.storage.set('photo',that.photo');

          //console.log("id:"+this.uid+this.name+this.photo);
        }, (error)=> {
          alert(error);
        })
      }
      else {
        alert('Not Logged in');
      }
    })

photo of the inspect with chrome developer enter image description here

i don't see any key of photo as i set it.. why is that?

Upvotes: 2

Views: 821

Answers (1)

Ian Pinto
Ian Pinto

Reputation: 2299

Installation

To use this in your Ionic 2/Angular 2 apps, either start a fresh Ionic project which has it installed by default, or run:

npm install @ionic/storage

If you'd like to use SQLite as a storage engine, install a SQLite plugin (only works while running in a simulator or on device):

cordova plugin add cordova-sqlite-storage --save

In order to use Storage you may have to edit your NgModule declaration in src/app/app.module.ts to add Storage as a provider as below: 

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

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [ Storage ] // Add Storage as a provider
})
export class AppModule {}

Now, you can easily inject Storage into a component:

import { Component } from '@angular/core';

import { NavController } from 'ionic-angular';

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

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

  constructor(public navCtrl: NavController, public storage: Storage) {

  }

}

To set an item, use Storage.set(key, value):

this.storage.set('name', 'Mr. Ionitron');

To get the item back, use Storage.get(name).then((value) => {}) since get() returns a Promise:

this.storage.get('name').then((name) => {
  console.log('Me: Hey, ' + name + '! You have a very nice name.');
  console.log('You: Thanks! I got it for my birthday.');
});

For more info on Storage module refer link: https://github.com/driftyco/ionic-storage

Upvotes: 1

Related Questions