使用@ionic/storage-angular时页面刷新后存储数据丢失如何解决

问题根因 #

• StorageService的初始化逻辑是异步操作，现有代码中的读写方法未等待初始化完成就执行操作，页面刷新后存储实例还未创建完成时调用读写接口会直接返回null，产生数据被删除的假象。
• 存储操作本身为异步逻辑，未正确处理异步返回值也会导致读取数据异常。

修复方案 #

1. 改造StorageService，增加初始化等待逻辑

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

@Injectable({
    providedIn: 'root'
 })
export class StorageService {
    private _storage: Storage | null = null;
    // 存储初始化完成的Promise，用于后续操作等待
    private initComplete: Promise<Storage>;
    
    constructor(private storage: Storage){
       this.initComplete = this.init();
    }

    async init() {
        const storage = await this.storage.create();
        this._storage = storage;
        return storage;
     }

    public async set(key: string, value: any) {
        // 所有读写操作前先等待初始化完成
        const storage = await this.initComplete;
        return storage.set(key, value);
    }

    public async get(key: string) {
        const storage = await this.initComplete;
        return storage.get(key);
    }

    public async clear() {
        const storage = await this.initComplete;
        return storage.clear();
    }
}

2. 读写操作统一处理异步返回值

调用存储接口时必须加await等待操作完成：

// 存储数据（原有调用逻辑保留即可
await this.storageService.set('loginUser',{id: user.id,userName: user.first_name});

// 读取数据必须加await
const savedUser = await this.storageService.get('loginUser');

3. 可选：Web端运行可指定存储驱动优先级

如果是在浏览器环境运行，可在app.module中配置存储驱动优先级，避免浏览器自动清理IndexedDB数据导致的丢失：

// app.module.ts
imports: [
  // 其他import保持不变
  IonicStorageModule.forRoot({
    name: '__myAppDb',
    driverOrder: ['localstorage', 'indexeddb', 'sqlite']
  }),
]

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