NGRX Store 是否具备持久性？重启浏览器能否恢复状态？

嘿，这个问题问得很接地气！先直接给结论：NGRX Store 默认是不具备持久性的。

为什么呢？因为 NGRX Store 本质上是一个内存中的状态容器，所有状态都存在浏览器的内存里。当你关闭浏览器（或者标签页）时，浏览器会释放这部分内存，之前存在 Store 里的状态自然也就丢失了，重新打开后是没法直接检索到之前的状态的。

不过别担心，我们可以通过简单的配置来给它加上持久化能力，最常用的方案是结合浏览器的 localStorage 或 sessionStorage，官方也推荐使用 @ngrx/store-localstorage 这个专门的库来实现。

实现持久化的步骤 #

• 首先安装依赖：

  npm install @ngrx/store-localstorage
  

• 然后在配置 Store 的地方，导入并使用 localStorageSync 元 reducer，示例代码如下：

  import { StoreModule } from '@ngrx/store';
  import { localStorageSync } from '@ngrx/store-localstorage';
  import { reducers } from './reducers';
  
  // 定义要持久化的状态切片
  const syncConfig = {
    keys: ['user', 'settings'], // 这里填你想持久化的状态节点名称
    rehydrate: true, // 开启重新加载时恢复状态
  };
  
  // 创建带持久化的元 reducer
  function localStorageSyncReducer(reducer: any) {
    return localStorageSync(syncConfig)(reducer);
  }
  
  @NgModule({
    imports: [
      StoreModule.forRoot(reducers, {
        metaReducers: [localStorageSyncReducer],
      }),
    ],
  })
  export class AppModule {}
  

一些注意事项 #

• 不是所有状态都适合持久化：像用户登录信息、界面偏好设置这类需要跨会话保留的状态可以存，但临时的表单数据、加载状态这类一次性的状态就没必要了。
• 敏感数据要谨慎：localStorage 是明文存储的，不要放密码、token 这类敏感信息（如果要存，记得先加密）。
• 可选 sessionStorage：如果只想在当前标签页会话内保留状态，可以把配置里的 storage 选项设为 sessionStorage，默认是 localStorage。

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