离子2如何设置和获取本地存储的值

Question

I have 2 screens. Each screen have one input field. At last screen I need to get the entered values of all input screen at last screen. For that I need to store the each screen value locally when I press next button. But in ionic 2 how can I do that?

here my html code

<ion-input [(ngModel)]="SignUpData.username" name="username" type="text"  #username="ngModel" required>
</ion-input>

in my app/app.module.js :

I have this line

import { IonicStorageModule } from '@ionic/storage';
IonicStorageModule.forRoot()

And in my page/signup.ts

SignUpData = { username:''};
nextbtn() {
console.log(this.SignUpData.username);  // i am getting correct value
}

But how can I code more or import some storage to store my value (set value), And in another screen, secondscreen.ts , how can I get that locally stored value.

Answer 1

Fist you need to import it in the app.module.ts file:

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

// ...    

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

And then inject it into any of your components or pages:

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

export class MyApp {
  constructor(private storage: Storage) {

     // set a key/value
     this.storage.set('name', 'Max');

     // Or to get a key/value pair
     storage.get('age').then((val) => {
       console.log('Your age is', val);
     });
  }
}

So in the nextbtn method you'd need to save it

nextbtn() {
  console.log(this.SignUpData.username);
  this.storage.set('username', this.SignUpData.username);
}

And in the next page, you can get that value again like this

readUsername() {
  // Notice that the get method returns a promise!
  storage.get('username').then((username) => {
    console.log(username);
  });
}

You can find more information in the Storage docs .