Angular环境下Ionic Storage的get方法无法读取已存储值问题求助

根因分析 #

读取返回null的核心原因是Storage.create()是异步方法，在构造函数中直接调用后未等待初始化完成就执行读取操作，此时存储实例尚未绑定到底层已有的持久化存储，所以无法读取到之前写入的值。另外也可能遗漏了根模块的IonicStorage注册配置。

修复步骤 #

1. 修正全局服务的初始化逻辑 #

在Globals服务中缓存存储初始化的Promise，所有读写操作都等待初始化完成后再执行：

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

@Injectable()
export class Globals {
    private _authenticationToken: string;
    // 缓存存储初始化完成的Promise
    private storageReady: Promise<Storage>;

    constructor(private storage: Storage) {
        this._authenticationToken = null;
        this.storageReady = this.storage.create();        
    }

    public async saveToken() : Promise<void>
    {
        // 等待初始化完成再执行写入
        await this.storageReady;
        console.log("Saving token");
        console.log(this._authenticationToken);
        const valor = await this.storage.set("AuthenticationToken", this._authenticationToken);
        console.log("token saved.");
    }

    public async loadToken() : Promise<void>
    {
        // 等待初始化完成再执行读取
        await this.storageReady;
        const v = await this.storage.get("AuthenticationToken");
        console.log("token loaded");
        console.log(v);
        this.setToken(v);
    }

    // 其余原有逻辑...
}

2. 确认根模块配置 #

检查你的AppModule是否已经正确导入并注册IonicStorageModule：

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule } from '@ionic/angular';
import { IonicStorageModule } from '@ionic/storage-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    IonicModule.forRoot(),
    // 必须添加这一行完成全局注册
    IonicStorageModule.forRoot()
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}

其他排查点 #

如果你在IonicStorageModule.forRoot()中自定义了存储名、驱动列表等配置，确保没有在create()方法中传入不同的配置，否则会创建两个独立的存储实例，无法互相读取数据。

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