I want to take the information entered in the form and use it somewhere, but state resets when the p-CodePudding

I have a formData state. The information in the form comes here when submit. I want to show this information somewhere, but when the page is refreshed or when switching to another page, this state is lost. How can I keep this information permanently?

Step1.js

export default function Step1({ formData, setFormData })
 {
  ....
  return (
 <TextField fullWidth id="outlined-basic" label="Address Title" variant="outlined" size="small"
  onChange={(e) => {  setFormData({ ...formData, AddressTitle: e.target.value }); }} 
  value={formData.AddressTitle}
 /> )
}

Main.js

export default function Main() 
{
  const [formData, setFormData] = useState({});

   const PageDisplay = () => {
    if (page === 0) {
      return <Step1 formData={formData} setFormData={setFormData} />;
    } 
   }

   return ( 
   <Button size="small" variant="contained" color="success"
              onClick={(e) => {
                if (page === FormTitles.length - 1) {
                  alert("ADDRESS SUBMITTED"); console.log(formData);
                } else {
                  setPage((currPage) => currPage   1);
                }
              }}
  >
 {page === FormTitles.length - 1 ? "Submit" : "Next"}
 </Button>
   )
}

How can I keep the contents of the formdata so that it will not be lost?

CodePudding user response：

You can use local storage.

For setting up local storage

window.localStorage.setItem('formData', formData);

For getting items from local storage

window.localStorage.getItem('formData')