Ionic 应用浏览器刷新行为解析与状态持久化策略

npm install @capacitor/preferences
npx capacitor sync

import { Component, OnInit, OnDestroy } from '@angular/core';
import { Preferences } from '@capacitor/preferences';
import { Router } from '@angular/router'; // 引入Router以监听路由变化

interface AppState {
  userInput: string;
  counter: number;
  // 其他需要持久化的数据...
}

@Component({
  selector: 'app-state-example',
  template: `
    <ion-header>
      <ion-toolbar>
        <ion-title>状态持久化示例</ion-title>
      </ion-toolbar>
    </ion-header>
    <ion-content class="ion-padding">
      <p>用户输入: <ion-input [(ngModel)]="userInput" (ionChange)="saveStateOnInput()" placeholder="输入一些文本"></ion-input></p>
      <p>计数器: {{ counter }} <ion-button (click)="incrementCounter()">+</ion-button></p>
      <ion-button expand="block" (click)="navigateToOtherPage()">前往其他页面</ion-button>
      <ion-button expand="block" color="danger" (click)="clearSavedState()">清除保存的状态</ion-button>
    </ion-content>
  `,
})
export class StateExampleComponent implements OnInit, OnDestroy {
  userInput: string = '';
  counter: number = 0;

  private readonly STATE_KEY = 'my_app_persistent_state';

  constructor(private router: Router) {}

  async ngOnInit() {
    console.log('Component initialized. Attempting to load state...');
    await this.loadState();
  }

  // 虽然浏览器刷新不会触发 ngOnDestroy，但对于正常的页面切换，这个钩子可用于保存状态
  ngOnDestroy() {
    // 可以在这里进行一次最终保存，以防用户通过正常导航离开页面
    // this.saveState();
  }

  /**
   * 当用户输入发生变化时保存状态。
   * 这种方式可以实时保存用户输入，即使刷新也能恢复。
   */
  saveStateOnInput() {
    this.saveState();
  }

  /**
   * 增加计数器并保存状态。
   */
  incrementCounter() {
    this.counter++;
    this.saveState();
  }

  /**
   * 将当前组件的状态保存到 Capacitor Preferences。
   */
  async saveState(): Promise<void> {
    const stateToSave: AppState = {
      userInput: this.userInput,
      counter: this.counter,
    };
    try {
      await Preferences.set({
        key: this.STATE_KEY,
        value: JSON.stringify(stateToSave),
      });
      console.log('State saved:', stateToSave);
    } catch (error) {
      console.error('Error saving state:', error);
    }
  }

  /**
   * 从 Capacitor Preferences 加载并恢复组件状态。
   */
  async loadState(): Promise<void> {
    try {
      const { value } = await Preferences.get({ key: this.STATE_KEY });
      if (value) {
        const loadedState: AppState = JSON.parse(value);
        this.userInput = loadedState.userInput || '';
        this.counter = loadedState.counter || 0;
        console.log('State loaded:', loadedState);
      } else {
        console.log('No saved state found for this component.');
      }
    } catch (error) {
      console.error('Error loading state:', error);
    }
  }

  /**
   * 清除保存的状态。
   */
  async clearSavedState(): Promise<void> {
    try {
      await Preferences.remove({ key: this.STATE_KEY });
      console.log('Saved state cleared.');
      // 清除后可以重置组件状态
      this.userInput = '';
      this.counter = 0;
    } catch (error) {
      console.error('Error clearing state:', error);
    }
  }

  /**
   * 导航到其他页面。
   * 在实际应用中，你可能需要在导航前保存全局状态。
   */
  navigateToOtherPage() {
    // 在导航到其他页面前，可以考虑保存当前页面的状态
    this.saveState();
    this.router.navigate(['/other-page']); // 假设存在 '/other-page' 路由
  }
}