close

How to maintain state after a page refresh in React.js?

Hello Guys, How are you all? Hope You all Are Fine. Today we are going to learn How to maintain state after a page refresh in React.js? in javascript. So Here I am Explain to you all the possible methods here.

Without wasting your time, Let’s start This Article.

How to maintain state after a page refresh in React.js ?

  1. How to maintain state after a page refresh in React.js ?

    maintain state after a page refresh in React.js You can “persist” the state using local storage as Omar Suggest, but it should be done once the state has been set. For that you need to pass a callback to the setState function and you need to serialize and deserialize the objects put into local storage.

  2. maintain state after a page refresh in React.js

    maintain state after a page refresh in React.js You can “persist” the state using local storage as Omar Suggest, but it should be done once the state has been set. For that you need to pass a callback to the setState function and you need to serialize and deserialize the objects put into local storage.

Method 1

You can “persist” the state using local storage as Omar Suggest, but it should be done once the state has been set. For that you need to pass a callback to the setState function and you need to serialize and deserialize the objects put into local storage.

constructor(props) {
  super(props);
  this.state = {
    allProjects: JSON.parse(localStorage.getItem('allProjects')) || []
  }
}


addProject = (newProject) => {
  ...

  this.setState({
    allProjects: this.state.allProjects.concat(newProject)
  },() => {
    localStorage.setItem('allProjects', JSON.stringify(this.state.allProjects))
  });
}

Method 2

With hooks:

const MyComponent = () => {

  const [selectedOption, setSelectedOption] = useState(1)

  useEffect(() => {
    const storedSelectedOption = parseInt(sessionStorage.getItem('selectedOption') || '1')
    setSelectedOption(storedSelectedOption)
  }, [])

  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(parseInt(e.target.value))
    sessionStorage.setItem('selectedOption', e.target.value)
  }

  return (
    <select onChange={handleOnChange}>
      <option value="5" selected={selectedOption === 5}>Five</option>
      <option value="3" selected={selectedOption === 3}>Three</option>
    </select>
  )
}

Apparently this also works:

const MyComponent = () => {

  const [selectedOption, setSelectedOption] = useState<number>(() => {
    return parseInt(sessionStorage.getItem('selectedOption') || '1')
  })

  const handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
    setSelectedOption(parseInt(e.target.value))
    sessionStorage.setItem('selectedOption', e.target.value)
  }

  return (
    <select onChange={handleOnChange}>
      <option value="5" selected={selectedOption === 5}>Five</option>
      <option value="3" selected={selectedOption === 3}>Three</option>
    </select>
  )
}

In modern browsers:

return (
  <select onChange={handleOnChange} value={selectedOption}>
    <option value="5">Five</option>
    <option value="3">Three</option>
  </select>
)

Summery

It’s all About this article. Hope all method helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which method worked for you? Thank You.

Leave a Comment