How to store config values in ionic?

Ionic Framework ionic-v3
1

Dear friends,

anybody know a simple method to store configuration data in ionic 3? I need to store maximum 10 config values of current user .

Please advise

Thanks

Anes

2

Use https://ionicframework.com/docs/storage/

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

export class MyApp {
  
  userData:any = {};
  
  constructor(private storage: Storage) { 
    this.userData.name = "Name";
    this.userData.age = "Age";
    this.userData.password = "Password";
    this.userData.gender = "male";
    
    // save userdata in storage
    this.storage.set('userData', this.userData);
  
    // get userdata from storage
    this.storage.get('userData').then((val) => {
      console.log('UserData:');
      console.log(val);
    });
  }
}
2 Likes
3

Might suggest putting the config bound to an interface…

interface UserData {
   name: string;
   age: number;
}

then…


   export class MyApp{
      constructor(private storage: Storage) {
         const userData: UserData = {
            name: 'Jeff',
            age: 30
         };

         // save userdata in storage
         this.storage.set('userData', userData);
  
         // get userdata from storage
         this.storage.get('userData').then((val: UserData) => {
            console.log('UserData:', val);
         });

      }
   }

Then you have type safety

2 Likes
4

Hi
I am struggling how to type the storage.get(val=>{…}) properly

As part of my pbjective only to work strong types

It complains sometimes it cannot set value of type x to variable of type LocalForage (or the other way around, I forgot)

Any hints how to type the return value from storage.get into the interface?

5 
this.storage.get('userData').then((val: UserData) => {
   //at this point val will have its intellisense
});

It is often better to have the access to storage going via a provider instead of interacting with it directly, as you may later on wish to switch the implementation to something else without having to update your code in 40 places :slight_smile:

It’s also a bit cleaner in terms of your method calls.

Here’s my implementation of something I call key-value-provider.ts…

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

@Injectable()
export class KeyValueProvider {

  constructor(private storage: Storage) {

  }

  async get<T>(key: string) {

    let payload = (await this.storage.get(key));

    return payload as T;
  }

  async remove(key: string) {
    await this.storage.remove(key);
    return true;
  }

  async set(key: string, val: any) {

    let payload = val;

    await this.storage.set(key, payload);
    return true;
  }

  async hasKey(key: string) {

    const allKeys = await this.storage.keys();

    const truthy = allKeys.some(k => k === key);

    return truthy;
  }

}

When you grab your object you would do something like…

   async getMyValue(){
      const value = this.keyValueProvider.get<UserData>('userData);
      return value;
   }
2 Likes
6

Thx!

Good to see you back again!
Tom

7

Yeah got bored lol :slight_smile: