is there a way to save multiple states to local storage at the same time?-CodePudding

I have a react application with a good amount of states. I've been looking around trying to find the best way to save the states to local storage. Honestly, none of the answers were helping so I decided to ask my own.

What's the best way to go about saving these states to local storage?

  const [thumb, setThumb] = useState();
  const [timestamp, setTimestamp] = useState("1:20");
  const [channelPic, setChannelPic] = useState();
  const [title, setTitle] = useState("Title");
  const [channelName, setChannelName] = useState("Channel");
  const [views, setViews] = useState("1,000");
  const [timeAgo, setTimeAgo] = useState("23");
  const [increment, setIncrement] = useState("minute");
  const [verified, setVerified] = useState(false);

Is there a way to save all these states at the same time every time one of them is set or is that not how saving states to local storage works. Also where and when exactly should I add them to local storage, as in, where does the function to add them go? Whenever the state is changed? Or at certain increments?

CodePudding user response：

You can Separately store all the states in different local variables

localStorage.setItem('thumb',thumb);

Make an object containing all the variables you want to store in local storage, then serialize it using JSON.stringify method and store it in local storage.

let anObject={
  "thumb":thumb,
  "timestamp":timestamp,
  "channelPic":channelPic,
  "title":title,
  "channelName":channelName,
  "views":views,
  "timeAgo":timeAgo,
  "increment":increment,
  "verified":verified
};

localStorage.setItem('obj', JSON.stringify(anObject));

Then, to retrieve the item use JSON.parse

anObject=JSON.parse(localStorage.getItem('obj'));

After that to update the values you can call useEffect and then update the anObject and set it to local storage.

useEffec(()=>{
anObject={
      "thumb":thumb,
      "timestamp":timestamp,
      "channelPic":channelPic,
      "title":title,
      "channelName":channelName,
      "views":views,
      "timeAgo":timeAgo,
      "increment":increment,
      "verified":verified
    };

    localStorage.setItem('obj', JSON.stringify(anObject));
},[thumb,timestamp,channelPic,title,channelName,views,timeAgo,increment,verified])

You can even get the values at the time of page load and set the states with them.

let anObject={};
useEffect(()=>{
anObject=JSON.parse(localStorage.getItem('obj'));
setThumb(anObject.thumb);
setTimestamp(anObject.timestamp);
setChannelPic(anObject.channelPic);
setTitle(anObject.title);
setChannelName(anObject.channelName);
setViews(anObject.views);
setTimeAgo(anObject.timeAgo);
setIncrement(anObject.increment);
setVerified(anObject.verified);
},[]);

The syntax might be a little bit 'off'

CodePudding user response：

Ideally [group related state][1]

const initialState = {
  timestamp: "1:20",
  title: "Title",
  channelName: "Channel",
  views: "1,000",
  timeAgo: "23",
  increment: "minute",
  verified: false
}

const state_key = 'GROUP_STATE'

const SomeComponent = (props) => {
  const [groupedState, setGroupedState] = useState({ ...initialState })
 
  const setThumb = (thumb) => setGroupedState(s => ({ ...s, thumb }));
  const setTimestamp] = (timestamp) = setGroupedState(s => ({ ...s, timestamp }));

  useEffect(() => {

    localStorage.setItem(state_key, JSON.stringify(setThumb));

  }, [setThumb]) // save makes its easy

Hope it helps

  [1]: https://beta.reactjs.org/learn/choosing-the-state-structure#group-related-state