Ionic 2 storage returns null - ionic2

Question

I stacked with Ionic 2 Storage after RC0.
Did all by instruction.
login.ts
import { Component } from '#angular/core';
import { NavController } from 'ionic-angular';
import { Storage } from '#ionic/storage';
import {TabsPage} from '../tabs/tabs';
#Component({
selector: 'page-login',
templateUrl: 'login.html'
})
export class LoginPage {
driver: any;
phone: any;
getPhone(){
return this.storage.get("phone");
};
constructor(private navCtrl: NavController, public storage: Storage)
{
this.driver = {
phone: '',
password: ''
};
this.getPhone().then(phone => {
console.log('RAW_PHONE: ' + phone);
this.phone = phone;
if (this.phone != undefined || this.phone != null){
console.log('PHONE: ' + this.phone);
this.navCtrl.setRoot(TabsPage);
}
});
}
feed.ts
import { Component } from '#angular/core';
import { Storage } from '#ionic/storage';
#Component({
selector: 'page-feed',
templateUrl: 'feed.html'
})
export class FeedPage {
getTruck(){
return this.storage.get("truck")
};
constructor(public storage: Storage) {
this.getTruck().then(val => {
console.log('SAVED TRUCK: ' + val);
});
}
After success launch on emulator I see a log:
DEVICE READY FIRED AFTER 1467 ms
Ionic Storage driver: cordovaSQLiteDriver
RAW_PHONE: null
Ionic Push: saved push token: cWPGBZzfchU:APA91bE5Rqk-mU4my7Avb689JRaWEA-b0mbkqPPiZui8M4bQR8TDayjwhLrS04Aj4qB9Y3_-IWLy9OoLrGaci5KhRvwgWkE4FZ4eSbgB2qkkql8Nk-oItgdo1ddN9vX_asyfYnys7TiK
Token saved: cWPGBZzfchU:APA91bE5Rqk-mU4my7Avb689JRaWEA-b0mbkqPPiZui8M4bQR8TDayjwhLrS04Aj4qB9Y3_-IWLy9OoLrGaci5KhRvwgWkE4FZ4eSbgB2qkkql8Nk-oItgdo1ddN9vX_asyfYnys7TiK
LOGIN RESPONSE: ok
LOGIN - SAVE PHONE: 55555
RESPONSE AFTER LOGIN: [object Object]
TRUCK NUMBER AFTER LOGIN: 3 (it means I successfuly got number and set in storage)
SAVED TRUCK: null (it means I try to get value from storage)
On first attemption to auth I get null, but then I close app, kill it from app manager, launch again and try to auth - and get saved value. But I still need to login, because Storage lost my login value.
What is wrong?

Answer 1

In my case this works fine, you need to stay after storage is ready (then).
Example:
this.storage.set('forms_data', this.forms_data).then((val) => {
this.navCtrl.setRoot(HomePage);
});

Answer 2

Install the cordova-sqlite-storage plugin:
cordova plugin add cordova-sqlite-storage --save
install "#ionic/storage" package (Optional for Ionic 2 >= RC.0):
npm install --save #ionic/storage
Add the following line in /src/app/app.module.ts,
import { Storage } from '#ionic/storage';
export function provideStorage() {
return new Storage(['sqlite', 'websql', 'indexeddb'], { name: 'database_name' });
}
// Add "Storage" inside providers
providers: [
{ provide: Storage, useFactory: provideStorage }, Storage
]
Use set() and get() methods to store and retrieve data in your pages.
import { Storage } from '#ionic/storage';
export class MyApp {
constructor(storage: Storage) {
storage.set('key', 'value 1'); // store
storage.get('name').then((val) => { // retrive
console.log('Your value is', val);
})
}
}
For Clarifications have a look at CodeExpertz
For Video reference at YouTube

Answer 3

every time you see something like this:
myFunction().then(....)
or
myFunction(callbackFunction());
then myFunction is doing some asynchronous work --> so it could take some or more time to execute this function.
But JavaScript runs to completion --> it start in your first line of code and goes through your code --> means the browser does not wait until the callback of then() is called. it start the this.storage.get() function and goes on for your console.log. And at some point this.storage.get() has finished and calls the callback you defined in then()
sso you need to use like this:
console.log('Your value is', storage.get('name'));