Ionic3本地存储数据保存与跨页获取及页面显示问题排查

看起来你已经成功把voter_id存在localStorage里了，控制台能打印到说明存储环节没问题，问题大概率出在数据绑定到模板的环节上。我来一步步帮你排查和修复：

第一步：确认Check页面的存储逻辑正确 #

先补全你Check页面的代码，确保存储动作没有问题：

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" [(ngModel)]="voterId"></ion-input>
    </ion-item>
  </ion-list>
  <button ion-button block (click)="saveVoterId()">保存并跳转</button>
</ion-content>

check.ts #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
import { HomePage } from '../home/home';

@Component({
  selector: 'page-check',
  templateUrl: 'check.html'
})
export class CheckPage {
  voterId: string; // 声明双向绑定的变量

  constructor(public navCtrl: NavController) {}

  saveVoterId() {
    // 存到localStorage，键名统一避免拼写错误
    localStorage.setItem('voter_id', this.voterId);
    console.log('已存储voter_id:', localStorage.getItem('voter_id'));
    // 跳转到Home页面
    this.navCtrl.push(HomePage);
  }
}

第二步：修复Home页面的数据获取与绑定问题 #

你说控制台能拿到数据但页面不显示，很大可能是没有把获取到的数据赋值给组件的实例变量，或者在错误的生命周期钩子中获取数据。

home.ts #

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  voterId: string; // 声明要绑定到模板的变量

  constructor(public navCtrl: NavController) {}

  // 用ionViewDidEnter钩子，确保页面进入时就获取数据
  ionViewDidEnter() {
    this.loadVoterId();
  }

  loadVoterId() {
    // 从localStorage取出数据，赋值给组件变量
    this.voterId = localStorage.getItem('voter_id');
    console.log('获取到的voter_id:', this.voterId);
  }
}

home.html #

<ion-header>
  <ion-navbar>
    <ion-title>Home</ion-title>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <h2>你的Voter ID是：</h2>
  <p>{{ voterId }}</p> <!-- 用插值表达式绑定组件变量 -->
</ion-content>

常见坑点排查 #

1. 变量名拼写错误：确保localStorage的键名（比如voter_id）在存和取的时候完全一致，模板里的{{ voterId }}和组件里的变量名也要完全匹配（大小写敏感）。
2. 生命周期钩子选错：如果用ngOnInit，可能在页面还没完全初始化时就执行了，用ionViewDidEnter更适合Ionic页面，每次页面进入都会触发。
3. 未声明组件变量：一定要在HomePage类里声明voterId: string;，不然模板找不到这个变量。

这样修改后，你应该就能在Home页面看到存储的voter_id了。

内容的提问来源于stack exchange，提问作者vignesh