페이지를 만들때 백엔드 팀에게 데이터 정보를 받아서 제작하게 된다.
이번 기업 협업 프로젝트 때 백엔드에서 정보를 보내주고 다시 받아야 하는 과정이 번거롭게 되는 상황이 있었다.
프론트 팀에서 각각 페이지를 만들었는데 팀원 한명이 받은 데이터를 내쪽으로 넘겨주어서 모든 데이터를 통합해서 내가 백엔드팀에게 데이터를 넘겨줘야 하는 상황이었다.
물론 각각 데이터를 백엔드 팀에 보낼수 있었지만 같은 데이터 set에 키값만 다르게 넘겨 주어야 하기 때문에 내쪽에서 한번에 보내주는 것이 깔끔했었다.
컴포넌트가 달라서 state로 props로 넘겨받으려고 했는데 페이지가 달랐기 때문에 import를 시켜서 받아야 할지 어떻게 받아야 할지 몰랐었는데
window.localSotrage.setitem()과 window.localSotrage.getitem()을 알게 되었다.
window.localSotrage
잠깐의 정보를 검색해서 알게 되었는데 캐시처럼 저장할수 있는 윈도우의 로컬 저장소 였다. localStorage속성은 사용자 local의 Storage객체에 접근하게 해준다. 캐시 와 같아서 로그아웃 하거나 브라우저가 종료되면 사라지는 데이터였다.
window.localSotrage.setitem()
우선 데이터를 저장하려면 setitem을 사용해야 했다.
데이터를 setitem으로 저장하고 getitem으로 가져오는 식으로 진행된다.
setitem(키,value) 이런형식으로 저장된다.
모든 키와 value는 string형식으로 저장이 된다.
이는 객체형식으로 저장을 해도 string으로 저장이 되었다.
예를 들어 setitem('개수',1) 이런 형식으로 저장되는데
value는 state값을 넣어놓으면 편하다.
참고로 console.log를 찍어서 값을 확인하는데
크롬, 사파리 등등의 개발자 도구에서도 window.localSotrage를 치면 확인할수 있다.
window.localSotrage.getitem()
getitem은 저장한 값을 가져온다,
가져와서 변수에 저장해놓고 setState()를 활용해서 state값에 저장해놓으면 편리하다
getitem은 setitem에서 저장한 키로 불러 올수 있다.
window.localSotrage.setitem('name','tom')
window.localSotrage.getitem('name')
이런 형식이다.
위에서 말했던 것처럼 객체도 저장할수 있지만 객체를 그냥 getitem으로 부르면
[object object]라고 뜨고 값을 확인 할수 없다.
이럴 경우 아래의 방법을 사용하면 된다.
getitem [object object] 해결법
JSON을 이용해 String 형식으로 만들어 SessionStorage에 저장한다.
저장할때는 무조건이라고 읽은것 같은데 대부분 String형식으로 저장한다.
setItem("name", JSON.stringify(names));
getitem을 하는 곳에서 JSON.parse을 통해 변환해서 사용한다.
JSON.parse(getItem("name"));
이렇게 사용하면 저장은 string으로 저장이 되지만
사용될때는 객체를 읽어올수 있다.
단순히 백엔드 팀에서 저장한 데이터만 사용해왔었는데
이렇게 데이터를 프론트 단에서 저장하고 활용할수 있다는 것에 대해 생각의 전환을 하게 된것 같다.
