ionic 2 如何设置和获取值本地存储答案

【问题标题】：ionic 2 how to set and get value local storageionic 2 如何设置和获取值本地存储
【发布时间】：2017-10-02 19:04:30
【问题描述】：

我有 2 个屏幕。每个屏幕都有一个输入字段。在最后一个屏幕上，我需要在最后一个屏幕上获取所有输入屏幕的输入值。为此，当我按下下一个按钮时，我需要在本地存储每个屏幕值。但是在 ionic 2 中我该怎么做呢？

这里是我的html代码

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

在我的 app/app.module.js 中：

我有这条线

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

在我的 page/signup.ts

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

但是我怎样才能编写更多代码或导入一些storage 来存储我的值（设置值），而在另一个屏幕secondscreen.ts 中，我怎样才能获得本地存储的值。

【问题讨论】：

标签： angular typescript ionic2 hybrid-mobile-app

【解决方案1】：

你需要在app.module.ts文件中导入它：

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

// ...    

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

然后将其注入到您的任何组件或页面中：

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);
     });
  }
}

所以在 nextbtn 方法中你需要保存它

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

在下一页中，您可以像这样再次获取该值

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

您可以在Storage docs找到更多信息。

【讨论】：