세션스토리지 이용해서 문제해결하기 (임시저장)

1. 문제

• 내 정보 수정화면입니다.
• 수정 할 자기소개와 주소변경으로 주소를 변경했을 때 수정하기 버튼을 눌러야 수정이 됩니다.
  하지만 구단변경을 누르면 본인이 응원하는 구단을 선택 할 수있는 새로운 페이지로 이동이 되는데
  새로운 응원 구단을 선택한 뒤 다시 돌아오면 수정하려고 입력해놓은 자기소개와 주소변경이 초기화 되있습니다. (당연한이야기)
• 이거를 피드백을 통해서 수정 했던 자기소개와 주소는 사라지지 않게 해달라고 하셨습니다.

저는 웹저장소 중에 sessionStorage를 사용했습니다.

 

사용 한 이유는 

• 수정하기 누르기전까지는 서버에 전송하지 않습니다. (Cookie 와 local, session의 차이)
• 현재 창에서만 유효해야하고, 브라우저를 껏다 켯을시에는 삭제 되어야한다. (local과 session의 차이)
• 추가로 세션스토리지는 브라우저가 새로고침해도 유지가 되지만 창이나 탭을 닫으면 삭제가 된다.
  그리고 쿠키와 달리 서버와 통신하지않으며 정말 가벼운 데이터만 담을 수 있다. 라는 점에서 세션을 썼다.

 

 

 

2.  해결하기 - 1

• 구단변경 페이지 이동시에 sessionStorage 를 이용해서 각 키 값이 falsy 한 값이면 key value 형태로 자기소개 글과 지역선택 한 것들을 sessionStorage에 저장했습니다.

 

key,value로 저장 된 모습

2.  해결하기 - 2

• useEffect 훅을 사용하여, 렌더링시 최초로
  sessionStrorage에 저장 된 값이 있다면 그 값을 자기소개State에 저장을 하고, 그 sessionStroage 는 지워줍니다.
  자기소개와 마찬가지로 지역선택도 동일하게 했습니다.