Angular 4+ 组件加载时恢复上次状态的实现方案

嘿，作为Angular初学者碰到这种页面返回状态丢失的问题太常见啦！我给你整理了几个实用的方案，包括你提到的存储和服务，还有兼顾两者的最优解👇

方案一：使用Local/Session Storage（适合持久化需求） #

这个方案适合需要即使刷新页面也能保留状态的场景，步骤非常清晰：

• 在PageA组件销毁时（ngOnDestroy生命周期钩子），把变量值序列化后存入LocalStorage/SessionStorage
• 在PageA初始化时（ngOnInit），从存储中读取并反序列化回变量

代码示例：

// page-a.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { OwnType } from './your-types';

@Component({
  selector: 'app-page-a',
  templateUrl: './page-a.component.html'
})
export class PageAComponent implements OnInit, OnDestroy {
  a: number = 0;
  b: string = '';
  c: OwnType = { /* 这里写你的初始值 */ };

  private STORAGE_KEY = 'pageA_state';

  ngOnInit(): void {
    // 页面初始化时加载之前保存的状态
    const savedState = localStorage.getItem(this.STORAGE_KEY);
    if (savedState) {
      const parsedState = JSON.parse(savedState);
      this.a = parsedState.a;
      this.b = parsedState.b;
      this.c = parsedState.c;
      // 注意：如果OwnType包含函数、Date这类特殊类型，需要自定义序列化/反序列化逻辑
    }
  }

  ngOnDestroy(): void {
    // 页面销毁时保存当前状态
    const currentState = { a: this.a, b: this.b, c: this.c };
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(currentState));
  }
}

方案二：使用Angular单例服务（适合应用内跳转保留状态） #

Angular的根注入服务默认是单例的——只要应用不刷新，服务里的状态就会一直存在。这个方案比存储更轻量，不需要处理序列化问题：

1. 先创建一个专门管理状态的服务

// page-state.service.ts
import { Injectable } from '@angular/core';
import { OwnType } from './your-types';

@Injectable({ providedIn: 'root' })
export class PageStateService {
  pageAState = {
    a: 0,
    b: '',
    c: {} as OwnType
  };
}

2. 在PageA组件中注入并直接使用这个服务的状态

// page-a.component.ts
import { Component } from '@angular/core';
import { PageStateService } from './page-state.service';

@Component({
  selector: 'app-page-a',
  templateUrl: './page-a.component.html'
})
export class PageAComponent {
  // 通过getter/setter直接绑定服务中的状态
  get a() { return this.stateService.pageAState.a; }
  set a(value: number) { this.stateService.pageAState.a = value; }

  get b() { return this.stateService.pageAState.b; }
  set b(value: string) { this.stateService.pageAState.b = value; }

  get c() { return this.stateService.pageAState.c; }
  set c(value: OwnType) { this.stateService.pageAState.c = value; }

  constructor(private stateService: PageStateService) { }
}

这样用户从PageB返回PageA时，直接读取服务里的最新值，状态完全不会丢失。

最优方案：结合服务与LocalStorage（兼顾持久化和易用性） #

如果既要应用内跳转快速读取状态，又要刷新页面不丢失数据，可以把两个方案结合起来，用服务封装存储逻辑，让组件不用直接操作存储：

// page-state.service.ts
import { Injectable } from '@angular/core';
import { OwnType } from './your-types';

@Injectable({ providedIn: 'root' })
export class PageStateService {
  private STORAGE_KEY = 'pageA_state';
  pageAState = {
    a: 0,
    b: '',
    c: {} as OwnType
  };

  constructor() {
    // 服务初始化时自动从LocalStorage加载状态
    this.loadSavedState();
  }

  // 提供给组件调用的保存方法
  saveCurrentState(): void {
    localStorage.setItem(this.STORAGE_KEY, JSON.stringify(this.pageAState));
  }

  private loadSavedState(): void {
    const savedState = localStorage.getItem(this.STORAGE_KEY);
    if (savedState) {
      Object.assign(this.pageAState, JSON.parse(savedState));
    }
  }
}

然后在PageA组件的ngOnDestroy中调用this.stateService.saveCurrentState()即可。这样既享受了单例服务的便捷性，又拥有LocalStorage的持久化能力，是绝大多数场景下的最优选择。

不推荐的方案：路由参数传递 #

虽然可以通过路由参数传递状态，但对于多个变量（尤其是自定义类型）来说，参数会变得冗长，还要额外处理序列化，容易出现各种问题，所以不建议用这种方式。

内容的提问来源于stack exchange，提问作者Bálint Réthy