ionic 2 local storage not working as expected

Question

I can't get local storage to work properly. When I do:

this.VEEU_ID = 'veeuID';
this.storage.set(this.VEEU_ID, 11);
alert('Storage was set to: '+JSON.stringify(this.storage.get(this.VEEU_ID)));

I get:

Storage was set to: {"_id":1733,"_state":1,"_result":"11","_subscribers":[]}

I thought that this.storage.get(this.VEEU_ID) should return the value 11

Solution

Fetching data from Storage is asynchronous which means our application will continue to run while the data loads. A promise allows us to perform some action whenever that data has finished loading, without having to pause the whole application

So an example of that should be:

//set a value in storage
this.storage.set("age", 25);

//get the value from storage
this.storage.get("age").then((value) => {
   alert('Storage value: '+ value);
})

More info can be found on the SqlStorage API page

Update for Ionic 2 RC

Since the release of Ionic 2 RC some changes took place:

Storage has been removed from ionic-angular and placed into a separate module, @ionic/storage. Starters have been updated to add this, make sure to add it to your package.json if you’re using the storage system. See more details here.

The following example shows how to Ionic 2 Storage:

First we edit the NgModule located in src/app/app.module.ts. The important part is to add Storage as a provider:

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

@NgModule({
  declarations: [
    ...
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    ...
  ],
  providers: [ Storage ] // Make sure you do that!
})
export class AppModule {}

Now we can inject Storage into our 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) {

  }

}

After injecting Storage into the component we can use the storage.set and storage.get methods:

this.storage.set('name', 'John').then(() => {
  console.log('Name has been set');
});

this.storage.get('name').then((name) => {
  console.log('Name: ' + name);
});

Comments

[Vahid Alimohamadi]

and how can assign value to external variable?

[Vahid Alimohamadi]

assume in a sample class: public key : any = null ; public storage : ... ; constructor(...) { this.storage.get('age').then(value => { this.key = value ; console.log(this.key) ; // will show the value of the key } console.log(this.key) ; // will show null } Why? I studied promises but i can't understand why it won't initialize the public variable in whole of class?