How do we persist redux store without using localstorage and make full reactjs web application work offline

Question

I have to do full offline functionality like all redux store data should remain after page refresh/offline(network connection lost). When user goes offline previously stored data should be used in viewing pages & for suppose i have big forms(ex: employee form with all work experience and personal details)suddenly if user loose network, data should not be lost.. should be saved somehow & after that when user is online have to store data to DB I am using react -18.0.0 version with react-redux & redux-saga.What are the possible ways?

score 0 · Answer 1 · answered Jun 14 '22 at 16:48

lets say users are required to log in to system .once login is successfull save that data to local storage then dispatch loginsuccess with user and token as payloads

execute a function inside useEffect in app.js to get back saved data from local storage and dispatch loginsuccess with those data

inside signup function:

let res=await axios.post("/signin",{user});
let{user,token}= res.data;
localStorage.setItem("user", JSON.stringify(user));
localStorage.setItem("token",token);
dispatch({ type: "loginsuccess",payload:{user,token}});

inside app.js :

useEffect(() => {
   
      dispatch(isUserLoggedIn());
        
  }, []);

inside isUserLoggedIn :

const localstorage = localStorage.getItem("user");
    if (localstorage) {
      const user = JSON.parse(localStorage.getItem("user"));
      dispatch({ type: "loginsuccess",payload:{user}});
    } else {
      dispatch({ type: "loginfailed",payload:{error:"please log in"}});
    }

Thank You for addressing.But using localstorage is not secure(any one can inspect view/update/delete) and storage is limited in kb — Bhavya, Jun 16 '22 at 07:15

score 0 · Answer 2 · answered Jun 14 '22 at 16:49

0

One way can be to store your form(or state) in localstorage. Another way can be use library redux-persist . I think your question is similar to the one asked here. Have a look here for more ideas.

answered Jun 14 '22 at 16:49

Kamal Aujla

327
2
10

score 0 · Answer 3 · answered Jun 17 '22 at 11:12

Another approach to store your data, is to make use of the IndexedDB API, it already has a great support on the latest browser versions caniuse.

There is a really good library that make use of this api but combined with promises idb.

After picking up how you're gonna do it, you can have a watcher saga that reacts to the online / offline status and do the appropriated synchronization.

Also I think it's important to mention that all of the above will only take care of the data, you still need to make sure to make the JS and CSS to be available offline. on web.dev there is a great induction on this subject.

How do we persist redux store without using localstorage and make full reactjs web application work offline

3 Answers3