如何在redux-persist中同时配置localStorage和sessionStorage？

Question

我想将用户相关的属性存储在 sessionStorage 中，并将其他属性存储在 localStorage 中。我能够使用以下配置的 persist 将所有属性存储在 localStorage 中

import reducers from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const persistConfig = {
key: 'root',
storage: storage,
stateReconciler: autoMergeLevel2 // see "Merge Process" section for details.
};

const pReducer = persistReducer(persistConfig, reducers);

有人可以告诉我如何在 persist 中配置 sessionStorage 和 localStorage 吗？

Answer 1

除了伊万的回答之外，您还可以使用session开箱即用的驱动程序。

import reducers from './reducer';
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import sessionStorage from 'redux-persist/lib/storage/session'
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';

const rootPersistConfig = {
  key: 'root',
  storage: storage,
  blacklist: ['auth'],
  stateReconciler: autoMergeLevel2
};

const authPersistConfig = {
  key: 'auth',
  storage: sessionStorage,
}

const rootReducer = combineReducers({
  auth: persistReducer(authPersistConfig, authReducer),
  other: otherReducer,
})

export default persistReducer(rootPersistConfig, rootReducer)

Answer 2

有时您只想在当前浏览器会话中缓存/保留数据。当关闭浏览器时，你希望缓存再次变空；但是当您刷新浏览器选项卡时，您希望保持缓存完好无损。例如，当您在用户登录应用程序后处理用户会话时，此行为可能很有用。用户会话可以保存到浏览器关闭为止。您可以在其中使用本机 sessionStorage 而不是 localStorage。会话存储的使用方式与本地存储相同。

// Save data to sessionStorage
sessionStorage.setItem('key', 'value');

// Get saved data from sessionStorage
let data = sessionStorage.getItem('key');

// Remove saved data from sessionStorage
sessionStorage.removeItem('key');

// Remove all saved data from sessionStorage
sessionStorage.clear();