Angular中LocalStorage无法持久化保存NGRX状态问题

你编写的storeMetaReducers持久化元减速器未注册到NGRX Store模块中，NGRX运行时完全不会执行这段持久化逻辑，因此既不会在状态更新时写入localStorage，也不会在应用初始化时读取本地缓存状态。你看到的localStorage里固定的初始值是之前测试残留的记录，因为持久化逻辑从未执行，所以删除后不会生成新记录、刷新时状态也会重置。

• 第一步：在app.module.ts中补充storeMetaReducers的导入，路径根据项目实际结构调整即可：

// 补全这行导入
import { storeMetaReducers } from './store.reducers';

• 第二步：在StoreModule.forRoot()的配置项中添加metaReducers字段，注册自定义的元减速器：

StoreModule.forRoot(appReducers, {
  metaReducers: [storeMetaReducers], // 新增该行注册元减速器
  runtimeChecks: {
    strictStateImmutability: false,
    strictActionImmutability: false,
    strictStateSerializability: false,
    strictActionSerializability: false
  }
}),

• （可选优化）第三步：给localStorage读写增加异常捕获，避免JSON解析失败、存储配额耗尽等异常导致应用崩溃，优化后的store.reducers.ts参考如下：

import { Action, ActionReducer } from '@ngrx/store';
import { LocalStorageConstants } from '../shared/constants/local-storage.constants';
import { AppState } from './app.state';

export function storeMetaReducers(reducer: ActionReducer<AppState>) {
  return function (state: AppState | undefined, action: Action) {
    // 应用初始化时读取本地缓存
    if (state === undefined) {
      let persistedState: AppState | undefined;
      try {
        const persisted = localStorage.getItem(LocalStorageConstants.AppState);
        persistedState = persisted ? JSON.parse(persisted) : undefined;
      } catch (e) {
        console.error('读取本地存储状态失败', e);
        localStorage.removeItem(LocalStorageConstants.AppState);
      }
      return persistedState ?? reducer(state, action);
    }

    const newState = reducer(state, action);
    // 状态更新时写入本地存储
    try {
      localStorage.setItem(LocalStorageConstants.AppState, JSON.stringify(newState));
    } catch (e) {
      console.error('写入本地存储状态失败', e);
    }
    return newState;
  };
}

修改完成后操作验证：

• 触发NGRX状态更新后，开发者工具Application面板中对应的localStorage项会同步更新为最新状态，不再固定为初始值
• 刷新页面后，NGRX会自动读取localStorage缓存的状态，不会重置为初始值
• 手动删除localStorage中的状态项后刷新，应用会正常加载默认初始状态，后续触发状态更新时会重新生成对应的存储记录

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