无需local/session存储 如何借助RxJS与Angular实现页面刷新数据保留？

首先明确：页面刷新会清空整个Angular应用运行时内存，所有RxJS Subject存储的状态都会被销毁，仅靠客户端侧的RxJS和Angular能力无法直接保留刷新前的状态，以下是符合要求的替代实现思路：

方案1：用Angular路由查询参数携带筛选状态 #

• 每次用户提交筛选表单时，将筛选参数序列化后更新到当前路由的查询参数中，不需要跳转页面
• 页面刷新后，在组件初始化阶段从ActivatedRoute的queryParamMap observable中读取之前的筛选参数，直接赋值给表单和BehaviourSubject即可
• 代码示例：

// 表单提交时更新路由查询参数
constructor(private router: Router, private route: ActivatedRoute) {}

onFilterSubmit(filterParams: FilterType) {
  this.router.navigate([], {
    relativeTo: this.route,
    queryParams: filterParams,
    queryParamsHandling: 'merge'
  });
  // 同步更新你的BehaviourSubject
  this.filterService.filterSubject.next(filterParams);
}

// 组件初始化时读取参数
ngOnInit() {
  this.route.queryParamMap.pipe(
    // 处理空参数的情况
    map(params => {
      const savedParams = Object.fromEntries(params.entries);
      return Object.keys(savedParams).length ? savedParams : this.defaultDbParams;
    })
  ).subscribe(finalParams => {
    this.filterForm.patchValue(finalParams);
    this.filterService.filterSubject.next(finalParams);
  })
}

• 优势：无额外存储依赖，参数可直接分享给其他用户打开相同筛选状态的页面

方案2：将筛选状态同步到服务端存储 #

• 每次用户提交筛选表单时，调用接口将筛选参数存入服务端对应用户的配置表中
• 页面刷新后，BehaviourSubject的初始值优先拉取该用户的最新筛选配置，再兜底使用全局默认值
• 优势：用户多端登录也可以同步到最新的筛选配置，状态不会随浏览器清空丢失

方案3：使用Angular自带的TransferState（仅支持SSR场景） #

• 如果你的项目是Angular服务端渲染（SSR）项目，可以使用@angular/platform-browser提供的TransferState将筛选状态从服务端传递到客户端，刷新时可以从传输状态中读取之前缓存的配置
• 仅适用于SSR场景，纯客户端渲染项目无法使用该方案

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