Ngrx状态数据存储位置及页面刷新时的存储方式问询

嘿，我来帮你理清NgRx的状态存储逻辑，这是个很常见的疑问！

默认存储位置 #

默认情况下，NgRx Store 完全依赖内存存储，不会自动将状态持久化到localStorage、IndexedDB或者其他浏览器存储中。这意味着：

• 状态只存在于当前页面会话的内存里
• 切换路由、组件销毁时，只要页面没刷新，状态会正常保留
• 但一旦页面刷新或浏览器标签关闭，内存里的状态就会被彻底清空

页面刷新时的状态处理 #

默认行为 #

页面刷新后，NgRx会重新初始化Store，状态会直接回到你在reducer中定义的初始状态——毕竟之前内存里的状态已经随着页面刷新被销毁了。

如何实现状态持久化（跨刷新保留） #

如果需要让状态在页面刷新后依然保留，你得手动添加持久化逻辑，常见的实现方式有两种：

1. 使用官方插件 @ngrx/store-localstorage

这是NgRx官方提供的轻量持久化工具，能轻松将指定的状态切片同步到localStorage或sessionStorage。配置起来很简单：

// 引入插件并包装reducer
import { localStorageSync } from '@ngrx/store-localstorage';

export function localStorageSyncReducer(reducer: ActionReducer<any>) {
  return localStorageSync({
    keys: ['user', 'appSettings'], // 指定要持久化的状态切片名称
    rehydrate: true // 页面加载时自动从localStorage恢复状态
  })(reducer);
}

// 在Store模块中使用包装后的reducer
StoreModule.forRoot(reducers, {
  metaReducers: [localStorageSyncReducer]
})

2. 自定义Effects同步状态

如果你需要更灵活的控制（比如用IndexedDB存储大量数据、添加加密逻辑），可以写一个NgRx Effect，监听状态变化并手动同步到浏览器存储：

import { Injectable } from '@angular/core';
import { Actions, createEffect, ofType } from '@ngrx/effects';
import { tap } from 'rxjs/operators';
import * as UserActions from './user.actions';

@Injectable()
export class UserEffects {
  persistUser$ = createEffect(() =>
    this.actions$.pipe(
      ofType(UserActions.updateUser),
      tap((action) => {
        // 将更新后的用户状态保存到localStorage
        localStorage.setItem('user', JSON.stringify(action.user));
      })
    ),
    { dispatch: false } // 不需要触发新的action
  );

  constructor(private actions$: Actions) {}
}

同时，在应用初始化时（比如AppComponent的ngOnInit方法里），从存储中读取数据并分发action恢复状态。

存储选择建议 #

• localStorage：适合存储小体积、结构简单的状态（比如用户偏好、登录信息），容量限制约5MB
• IndexedDB：适合存储大量、复杂的数据（比如离线缓存的列表数据），容量更大且支持异步操作

内容的提问来源于stack exchange，提问作者Hikmat G.