ionic3-如何在localstorage中保存数据并在下一页中检索数据

时间:2018-03-29 05:43:03

标签: angular ionic-framework ionic3

如何在localstorage中保存数据并在下一页中检索数据。我不知道如何 这样做?当我尝试以下代码时,我在控制台中获取数据(voter_id) 已成功但数据未显示在home.html页面

这是我的代码

check.html

<ion-header>
<ion-navbar>
<ion-title>check</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
<ion-list>
 <ion-item>
<ion-label floating>voter_id</ion-label>
<ion-input type="text" value="" [(ngModel)]="userData.voter_id"></ion-input>
</ion-item>
</ion-list>
<button ion-button full color="lightText" (click)="check()">submit</button>
</ion-content>

Check.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Storage } from '@ionic/storage';
import { HomePage } from '../home/home';
@IonicPage()
@Component({
selector: 'page-check',
templateUrl: 'check.html',
})
export class CheckPage {
userData:any={
'voter_id':''
};
constructor(public navCtrl: NavController, public navParams: NavParams, 
private storage: Storage) {       
}
ionViewDidLoad() {
console.log('ionViewDidLoad CheckPage');
}
check()
{
   window.localStorage.setItem('voter_id', this.userData.voter_id);
   let voterId= window.localStorage.getItem('voter_id');
  console.log(window.localStorage.getItem('voter_id'));

  this.navCtrl.push(HomePage);
        }
   }

从检查页面我需要将数据(voter_id)保存到localStorage并在下一页home.html中检索该数据(voter_id)。这里我需要在主页中显示数据(home.html中的voter_id附近页面)不在控制台中。这该怎么做?我不需要在home.htmlhome.ts中添加任何内容来检索数据

home.html的

<ion-item>
  voter_id : 
</ion-item>

1 个答案:

答案 0 :(得分:0)

需要更改home.ts文件,例如:

pubilc voter_id:any;
constructor() {     
  this.voter_id = window.localStorage.getItem('voter_id');
}

还需要在home.html中进行更改

<ion-item>
  voter_id : {{voter_id }}
</ion-item>