-1

I am currently working on a single page application using ReactJS. I have to use local storage to save states but it's not safe and secure. I want to know if there is any possible safe way to use local storage for states?

Mishual Fatima
  • 1
  • [You can add a local state](https://reactjs.org/docs/state-and-lifecycle.html#adding-local-state-to-a-class) or try [Redux Toolkit](https://redux-toolkit.js.org/). – Ajeet Shah Mar 10 '21 at 05:43
  • you can use Redux instead of local storage. – Usman Ghani Mughal Mar 10 '21 at 05:45
  • What are you trying to persist? Remember, if it's already in app state (i.e. memory), then storing it in localStorage is basically ***just*** as secure. – Drew Reese Mar 10 '21 at 05:49

1 Answers1

1

You can use the redux-persist package for persist state.

import { createStore, applyMiddleware } from 'redux';
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';
import rootReducer from '../_reducers';
import { composeWithDevTools  } from 'redux-devtools-extension';
import { persistStore, persistReducer } from 'redux-persist'
import storage from 'redux-persist/lib/storage'
const persistConfig = {
    key: 'chedsk',
    storage,
  }
const loggerMiddleware = createLogger();

const persistedReducer = persistReducer(persistConfig, rootReducer)
 
const composeEnhancers = composeWithDevTools({trace: true, traceLimit: 20});
export const store = createStore(
    persistedReducer,composeEnhancers( applyMiddleware(
        thunkMiddleware,
        loggerMiddleware
    ))
   
)
export const persistor = persistStore(store)


import { store, persistor } from './_helpers/store';
import { PersistGate } from 'redux-persist/integration/react'
render(
    <Provider store={store}>
        <PersistGate loading={null} persistor={persistor}>
            <App />
        </PersistGate>
    </Provider>,
    document.querySelector('#root')
);
abhay
  • 642
  • 5
  • 13