Ionic 应用刷新重载与状态持久化深度解析

npm install @capacitor/preferences
npx cap sync

import { Preferences } from '@capacitor/preferences';

// 假设您有一个服务或组件来管理应用状态
interface AppState {
  userId: string;
  theme: 'light' | 'dark';
  lastVisitedPage: string;
  // ... 其他需要持久化的数据
}

export class AppStateManager {
  private appState: AppState = {
    userId: '',
    theme: 'light',
    lastVisitedPage: '/'
  };

  constructor() {
    // 在服务初始化时尝试加载状态
    this.loadAppState();
  }

  // 保存状态到Preferences
  async saveState(key: string, state: AppState) {
    try {
      await Preferences.set({
        key: key,
        value: JSON.stringify(state), // 将对象转换为JSON字符串存储
      });
      console.log('App state saved successfully.');
    } catch (error) {
      console.error('Failed to save app state:', error);
    }
  }

  // 更新并保存某个状态项
  async updateAndSaveState(key: keyof AppState, value: any) {
    this.appState = { ...this.appState, [key]: value };
    await this.saveState('myAppState', this.appState);
  }

  // 获取当前状态
  getAppState(): AppState {
    return this.appState;
  }
}

import { Preferences } from '@capacitor/preferences';

// ... 承接上面的 AppStateManager 类

export class AppStateManager {
  // ... (previous code)

  // 从Preferences加载状态
  async loadAppState() {
    try {
      const { value } = await Preferences.get({ key: 'myAppState' });
      if (value) {
        this.appState = JSON.parse(value) as AppState;
        console.log('App state loaded:', this.appState);
      } else {
        console.log('No previous app state found.');
      }
    } catch (error) {
      console.error('Failed to load app state:', error);
    }
  }

  // ... (other methods)
}

// 在您的应用根组件 (如 app.component.ts) 或某个服务中调用加载逻辑
// 例如在 Angular 的 ngOnInit 生命周期钩子中
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.scss'],
})
export class AppComponent implements OnInit {
  constructor(private appStateManager: AppStateManager) {} // 注入您的状态管理器

  async ngOnInit() {
    await this.appStateManager.loadAppState();
    // 根据加载的状态初始化UI或路由
    // 例如：this.router.navigateByUrl(this.appStateManager.getAppState().lastVisitedPage);
  }
}