Ionic中storage.get返回undefined问题及相关环境信息说明

我之前也踩过Ionic 3里Storage.get()返回undefined的坑，结合你的环境信息和代码场景，给你梳理几个常见原因和对应的解决办法：

你的环境信息 #

• CLI包（/usr/local/lib/node_modules）：@ionic/cli-utils: 1.19.2，ionic (Ionic CLI): 3.20.0
• 全局包：cordova (Cordova CLI): 8.0.0
• 本地包：@ionic/app-scripts: 3.1.8，Cordova Platforms: android 6.3.0，Ionic Framework: ionic-angular 3.9.2
• 系统：Node: v8.11.0，npm: 5.6.0，OS: macOS High Sierra
• 其他：backend: pro

常见问题原因&解决方案 #

1. Storage模块没完成初始化就调用 #

Ionic 3的Storage需要先完成初始化才能正常读写，很多时候undefined就是因为初始化没完成就调用了get()。

解决步骤：
首先在app.module.ts里确保注册了Storage服务：

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { Storage } from '@ionic/storage';

@NgModule({
  declarations: [MyApp],
  imports: [IonicModule.forRoot(MyApp)],
  bootstrap: [IonicApp],
  entryComponents: [MyApp],
  providers: [Storage] // 一定要注册这个服务
})
export class AppModule {}

然后在app.component.ts里等待Platform和Storage都ready后再进行操作：

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { Storage } from '@ionic/storage';

@Component({
  templateUrl: 'app.html'
})
export class MyApp {
  constructor(platform: Platform, private storage: Storage) {
    platform.ready().then(() => {
      // 先等Storage初始化完成
      this.storage.ready().then(() => {
        console.log('Storage已准备好');
        // 这里再执行你的初始存储/读取逻辑
      });
    });
  }
}

2. 存储和读取的键名不一致 #

Storage的键名是大小写敏感的，比如存的时候用'UserInfo'，读的时候用'userInfo'，就会返回undefined。

解决办法：
统一键名的写法，比如把常用键名定义成常量：

// 定义常量避免拼写错误
const USER_INFO_KEY = 'userInfo';

// 存储
this.storage.set(USER_INFO_KEY, {name: 'Adam'});

// 读取
this.storage.get(USER_INFO_KEY).then(data => {
  console.log(data); // 现在能正确拿到数据了
});

3. 异步操作顺序错误 #

Storage的set()和get()都是异步的，如果在set()还没完成就调用get()，肯定拿不到数据。

解决办法：
用then()链式调用或者async/await确保顺序：

// 方法1：then链式调用
this.storage.set('theme', 'dark').then(() => {
  // 等存储完成再读取
  this.storage.get('theme').then(theme => {
    console.log(theme); // 输出'dark'
  });
});

// 方法2：async/await（更清晰）
async saveAndLoadTheme() {
  await this.storage.set('theme', 'dark');
  const theme = await this.storage.get('theme');
  console.log(theme);
}

4. 移动端依赖的SQLite插件未安装 #

在Android/iOS真机上，Ionic Storage依赖cordova-sqlite-storage插件，如果没装可能会出现读写异常。

解决办法：
执行命令安装插件：

cordova plugin add cordova-sqlite-storage

另外如果是在浏览器测试，试试清除浏览器缓存或者用隐私模式打开，有时候缓存会导致数据读取异常。

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