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

- AD95

---

@Arthur，sessionStorage类似于localStorage；不同之处在于localStorage中的数据不会过期，而sessionStorage中的数据在页面会话结束时被清除。你觉得这有意义吗？ - Alex

@Alex，我知道这个，但它并不能解决这个问题 :) - Arthur

@Arthur，那你为什么要保存sessionStorage？这不合逻辑。 - Alex

@Alex 我不能代表其他人发言，但我的使用情况是，有些东西我只想在会话期间保留（因此使用sessionStorage），而其他一些东西我希望在会话之外保留（因此使用localStorage）。我希望从同一个redux存储库中同时获取两者，以便应用程序可以以相同的方式访问它们。 - Brendan Wood

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)

- karlmarxlopez

Answer 2

来自官方redux-persist存储库的示例：

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

也许这不是你想要的解决方案，因为它基于嵌套reducers，但对我很有效。

- Ivan Zhuravlev

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();

- Govind Soni

---

不，我不想使用sessionStorage手动完成这个任务。我想在这部分使用redux-persist。 - AD95