如何在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

除了Ivan的回答之外，您还可以开箱即用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

来自官方redux-persist repo的示例：

import { combineReducers } from 'redux'
import { persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'

import { authReducer, otherReducer } from './reducers'

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

const authPersistConfig = {
  key: 'auth',
  storage: storage,
  blacklist: ['somethingTemporary']
}

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

export default persistReducer(rootPersistConfig, rootReducer)

https://github.com/rt2zz/redux-persist#nested-persists

也许这不是你想要的，因为这个解决方案是基于嵌套缩减程序的，但这对我很有效。

Answer 3

有时，您希望仅在当前浏览器会话中缓存/持久化数据。关闭浏览器时，您希望缓存再次变为空；但当您刷新浏览器选项卡时，您希望保持缓存不变。例如，在用户登录到应用程序之后处理用户会话时，此行为可能很有用。可以保存用户会话，直到浏览器关闭。这就是您可以使用原生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();

​