title: How to persist to both localStorage and sessionStorage at the same time using redux-persist?
body: <p>I'm implementing a login form using <code>react</code>, <code>redux</code> and <code>redux-persist</code>. Login API is ready from back-end team. The form has a "remember me" checkbox and I want to persist JWT auth token from login response.</p>
  
  <p>What I think is the right way to implement "remember me" is this:</p>
  
  <ul>
  <li>If "remember me" is not checked, token should be persisted to 
  <code>sessionStorage</code>. So that when browser is closed, user should login again but does not need login on switching tab or refreshing current page.</li>
  <li>If it is checked, token should be persisted to <code>localStorage</code>. User is still logged in even if the browser is closed.</li>
  </ul>
  
  <p>Now I know from our back-end perspective there is only token expiration time.</p>
  
  <p>My first question is if my client side view and approach is correct or not.</p>
  
  <p>If it is, how can I update my persist config based on login "remember me" checkbox? </p>
  
  <p>My current <code>store.js</code> is this: </p>
  
  <pre><code>import { createStore } from 'redux';
  import { persistStore, persistReducer } from 'redux-persist';
  import storage from 'redux-persist/lib/storage'; 
  import rootReducer from './reducers';
  
  const persistConfig = {
    key: 'root',
    storage,
    whitelist: ['auth'],
  };
  
  const persistedReducer = persistReducer(persistConfig, rootReducer);
  
  const store = createStore(persistedReducer);
  
  const persistor = persistStore(store);
  
  export {
    store, persistor
  };
  </code></pre>
  
  <p>And it is used here: </p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from 'js/containers/App';
  import { store, persistor } from './store';
  
  const render = Component =&gt; {
    ReactDOM.render(
      &lt;Component store={store} persistor={persistor}/&gt;,
      document.getElementById('root')
    )
  };
  
  render(App);
  
  if (module.hot) {
    module.hot.accept('js/containers/App', () =&gt; {
      const NextApp = require('js/containers/App').default;
      render(NextApp);
    });
  }
  </code></pre>
  
  <p>I want to change <code>persistConfig</code> based on login form and use <code>sessionStorage</code> instead of <code>localStorage</code> but it's like store structure is formed here and there is no way to change it in app. </p>
  
  <p>Any idea how to implement this?</p>