Redux Toolkit+redux-persist如何持久化状态到sessionStorage

默认redux-persist的持久化存储指向localStorage，你已经完成基础接入的前提下，只需要替换存储适配即可，不需要改动原有业务逻辑和其他持久化规则。

具体配置步骤 #

• 替换存储引入
  移除原有代码中对localStorage适配的引入，改为引入redux-persist内置的sessionStorage适配：

// 删掉原来的引入：import storage from 'redux-persist/lib/storage'
// 替换为sessionStorage适配
import storageSession from 'redux-persist/lib/storage/session'

• 修改persist配置项
  找到定义persistConfig的位置，把storage字段的值替换为刚引入的storageSession，其余配置（比如存储key、白名单/黑名单、版本号、迁移逻辑等）全部保留原有设置即可：

const persistConfig = {
  key: 'root', // 保持你之前自定义的存储key不变
  storage: storageSession, // 仅替换这一项
  // 原有配置全部保留，示例：
  // whitelist: ['userInfo', 'globalConfig'], // 白名单：需要持久化的模块
  // blacklist: ['tempState'], // 黑名单：不需要持久化的模块
  // version: 1,
}

• 其余store配置保持不变
  后续persistReducer包装、configureStore创建、persistor生成的代码完全不需要调整，和你之前接入redux-persist的写法一致即可，参考完整示例：

import { configureStore } from '@reduxjs/toolkit'
import { persistStore, persistReducer } from 'redux-persist'
import storageSession from 'redux-persist/lib/storage/session'
import rootReducer from './reducers' // 你的项目根reducer

const persistConfig = {
  key: 'root',
  storage: storageSession,
  whitelist: ['userInfo']
}

const persistedReducer = persistReducer(persistConfig, rootReducer)

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      serializableCheck: {
        // 忽略redux-persist相关action的序列化检查，避免控制台警告
        ignoredActions: ['persist/PERSIST', 'persist/REHYDRATE', 'persist/REGISTER'],
      },
    }),
})

export const persistor = persistStore(store)

验证方法 #

配置完成后可以通过两点确认生效：

• 打开浏览器开发者工具-Application面板，在Session Storage分类下对应域名条目里，能看到你定义的持久化key对应的数据，Local Storage下不会生成新的redux-persist存储项
• 关闭当前标签页后重新打开站点，持久化数据正常读取；完全关闭浏览器后再访问站点，sessionStorage存储的数据会自动清空，符合预期生命周期

注意事项 #

• 不要直接将原生window.sessionStorage作为storage参数传入，redux-persist要求存储实例必须返回Promise格式的异步方法，官方内置的sessionStorage适配已经做了兼容处理，直接使用可以避免序列化、异步逻辑报错
• 如果之前localStorage中已经存了旧版本的持久化数据，切换存储后不会自动迁移，需要保留旧数据的话可以在应用初始化逻辑中手动读取localStorage对应数据写入sessionStorage，不需要的话直接清除旧的localStorage条目即可

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