How to add settings in ionic 3 using storage?

Ionic Framework ionic-v3
1

Friends,
I created an app in ionic 3 . But I need to some settings as ‘storage’. I tried to add it , but when I import storage class
import { Storage } from ‘@ionic/storage’; my page go blank. Why it’s ? Any body suggest a good method to check the the value already exist else add a default values for lbid,lbname,distid,lbtype … Please advise

Thanks
Anes

2

Just a suggestion.

I think Storage is different now. You should try using Native-Storage.

Hope it helps. :blush:

3

There is any difference b/w storage and Native-Storage… Suppose my sample page activity below what change i need to do in native storage ??

First page …

import { Component } from '@angular/core';
import { NavController,NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  film: any;
  isFavorite = false;
  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage ) {}
  
   
 
  goToPlanets() {
    this.storage.set('name', 'Anes');
    this.storage.set('age', '12');
    this.navCtrl.push('PeoplePage');
  }

}

Second Page (Destination)

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';

/**
 * Generated class for the PeoplePage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-people',
  templateUrl: 'people.html',
})
export class PeoplePage {

  constructor(public navCtrl: NavController, public navParams: NavParams, private storage: Storage) {
  }

  async showDetails() {
  let name = await this.storage.get('name');
  let age = await this.storage.get('age');

  if(name == 'Anes' && age == 12) {
       alert("Hi good");
   }

  } 

  play() {
   alert("ddfd");
  }
  ionViewDidLoad() {
    console.log('ionViewDidLoad PeoplePage');
  }

  async ionViewDidEnter(){

   await this.showDetails();
   this.play();

  } 


}

Please advise @cherry

4

I’ve never used Native-Storage yet since I store my stuff always on Firebase, but as I can read from the documentaion you can set and call it like this.

Install first ofc:

$ ionic cordova plugin add cordova-plugin-nativestorage
$ npm install --save @ionic-native/native-storage

Do this for both Pages:

import { NativeStorage } from '@ionic-native/native-storage';

constructor(private nativeStorage: NativeStorage) { }

Page 1

  goToPlanets() {
    this.nativeStorage.setItem('name', 'Anes');
    this.nativeStorage.setItem('age', '12');
    this.nativeStorage.setItem('PeoplePage');
  }

Page 2


  async showDetails() {
  let name = await nativeStorage.getItem('name');
  let age = await nativeStorage.getItem('age');

  if(name == 'Anes' && age == 12) {
       alert("Hi good");
   }

  } 

  play() {
   alert("ddfd");
  }

I recommend you reading the documentation. :slight_smile: