How to configure both localStorage and sessionStorage in redux-persist?

Question

I want to store user related properties in sessionStorage and other properties in localStorage. I was able to store all properties in localStorage using persist with this below configuration

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

Can someone please tell me how to configure both sessionStorage and localStorage in persist ?

Parvati

@Arthur,sessionStorage is similar to localStorage; the difference is that while data in localStorage doesn't expire, data in sessionStorage is cleared when the page session ends. Does it make sense to you? – Trude

@Alex, I know this, but it does not solve this problem :) – Amy

@Arthur, so why you want to save sessionStorage? it's not logical – Trude

@Trude While I can't speak for others, my use case is that there are some things that I want to persist only for the session (hence use sessionStorage) and other things that I want to persist beyond the session (hence localStorage). I'd like to have both available from the same redux store so that the app can access them the same way. – Mcgrody

Answer 1

In addition to Ivan's answer, you can use the session driver out of the box.

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)

Festal

The stateReconciler flag helped, albeit i am yet to entirely grasp what it means and does in full. – Expellee

Answer 2

Example from official 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

Maybe that's not what you were looking for, as this solution based on nesting reducers, but that worked for me.

Commie

Answer 3

Sometimes you want to cache/persist data only in your current browser session. When closing the browser, you want the cache to become empty again; but when you refresh the browser tab, you want to keep the cache intact. For instance, this behavior can be useful when you deal with a user session after a user logged in into your application. The user session could be saved until the browser is closed. That's where you can use the native sessionStorage instead of the localStorage. The session storage is used in the same way as the local storage.

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

Ojibwa

No, I don't want to do this manually using sessionStorage. I want to use redux-persist for this part. – Parvati