리액트 로컬스토리지를 통한 임시저장

폼을 만들고 임시저장버튼을 누르면

  const onClickSave = (e) => {

    const formData = new FormData();

    for (let i = 0; i < formImg.length; i++) {
      formData.append('images', formImg[i]);
    }

    axios({
      method: 'post',
      url: `http://127.0.0.1:8000/save/${userInfo.uid}`,
      data: formData,
      headers: {
        'Content-Type': 'multipart/form-data',
      },
    })
      .then(result => {

        localStorage.setItem(`saveImg_${userInfo.uid}`, JSON.stringify(result.data));
        localStorage.setItem(`saveData_${userInfo.uid}`, JSON.stringify(form));
        alert('임시저장 되었습니다.')
      })
      .catch(err => console.log('에러==>' + err))
  }

이미지를 파일로 전송해 multer 라이브러리로 서버에 저장하고 이미지 path를 json으로 받아

이미지 배열의 path와 form의 오브젝트 데이터를 로컬스토리지에 저장

  useEffect(() => {
    if (location.pathname.includes(`/products/new/${userInfo.uid}`) && (localStorage.getItem(`saveImg_${userInfo.uid}`) || localStorage.getItem(`saveData_${userInfo.uid}`))) {

      let txtData = JSON.parse(localStorage.getItem(`saveData_${userInfo.uid}`));
      setForm(txtData);
      setTempImg(JSON.parse(localStorage.getItem(`saveImg_${userInfo.uid}`)));

 

    } 


  }, []);

useEffect로 화면이 처음 로드될떄 이미지는 tempImg에 넣고 텍스트는 form에 넣어 보여줌

만약 임시저장을 한번 더 누르면 이미지는 저장 안되기 때문에 위 코드에서

      .then(result => {

        localStorage.setItem(`saveImg_${userInfo.uid}`, JSON.stringify([...result.data,...tempImg]));
        localStorage.setItem(`saveData_${userInfo.uid}`, JSON.stringify(form));
        alert('임시저장 되었습니다.')
      })

axios 이후 then에서 기존에 저장했던 이미지도 로컬스토리지에 다시 저장

  const naviProductNew = (e) => {
    if (userInfo) {
      if (localStorage.getItem(`saveImg_${userInfo.uid}`) || localStorage.getItem(`saveData_${userInfo.uid}`)) {
        const result = window.confirm('임시저장된 글이 있습니다 이어서 작성하시겠습니까?');
        if (result) {
          navigate(`/products/new/${userInfo.uid}`)
        } else {
          localStorage.removeItem(`saveImg_${userInfo.uid}`);
          localStorage.removeItem(`saveData_${userInfo.uid}`);
          navigate(`/products/new/${userInfo.uid}`)

        }
      } else {
        navigate(`/products/new/${userInfo.uid}`)
      }
    } else {
      handleLoginToggle()
    }
    // navigate(`/products/new/${userInfoSession.uid}`)
  }

헤더에서 상품등록페이지 이동 클릭시 로컬스토리지에 데이터가 있다면

window.confirm 띄우고 만약 임시저장글로 이동을 원치 않을시 로컬스토리지 데이터를 없애고 페이지 이동

          localStorage.removeItem(`saveImg_${userInfo.uid}`);
          localStorage.removeItem(`saveData_${userInfo.uid}`);

글 작성버튼 클릭시 로컬스토리지 비우고 로그아웃시도 로컬스토리지 비움