[위코드] TIL(Today I am Learned) -39(세션 스토리지 사용법)

세션 스토리지 사용법

  // 백엔드 버튼 눌렀을시에 보내주는 기능
  const SubmitQuery= () =>{
    useEffect(() => {
      const comp = JSON.parse(sessionStorage.getItem("check"))
      const endDate = JSON.parse(sessionStorage.getItem("endDate"))
      const startDate = JSON.parse(sessionStorage.getItem("startDate"))
      fetch('',{
        method: "POST",
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          comp, endDate, startDate, check
        })
      })
      .then(res => res.json())
      .then(res => {
        // <Link href={getFile.url}
        //   download={getFile.saveAsFileName}>
        // </Link>
      })
    }, [])
  }

이제부터 코드 복붙이 안되도록 ctrl+c, ctrl+v가 안되게 기능을 코드를 사진으로만 구현하였다가

그냥 개발자 공유정신에 입각해서 다시 코드를 붙였다.

그냥 가독성을 위해서 이미지를 넣어보았다고 생각하면 된다.

 

오늘은 세션의 기록된 내용을 가져오는데 연구하는 것으로 오늘 할일을 마쳤다고 생각한다.

정확히는 백엔드 통신 부분이 안되어 노는(?) 것이지만...

이것을 왜 구현하려해야만 했나면, 세션 스토리지로 올라가는 값들을 모두 가져와서 호출하고 있는데,

컴퓨터에서 "해당 state 값이 사용되었다, 선언하기전에" 라는 경고 문구가 떠서

내가 제대로 데이터를 안가져오고 있구나를 깨달았다.

해당 데이터를 다른 컴포넌트에서 

JSON.stringfy({해당 데이터})를 이용하여 올려놨는데 그 이유가 객체라 어쩔 수 없이 json로 올려버렸다.

그래서 이를 해결하기 위해 다시 json을 자바스크립트로 구현하는 json.parse를 사용했다.

그랬더니 제대로 자료가 가져와지는지 해당 경고문구가 사라졌다.

sessionStorage.setItem("key", value); // 해당 "키"에 값 입력
sessionStorage.getItem("key"); // 해당 "키"의 값 가져오기
sessionStorage.removeItem("key"); // 해당 "키"의 값 삭제
sessionStorage.clear(); // 스토리지 전체 비우기

https://m.blog.naver.com/10hsb04/221724653955

해당 문법을 참고한 자료

[Spring] JQuery 로컬스토리지(localStorage), 세션스토리지(sessionStorage) feat. 페이지 새로 고침 후 값 유��