LocalStorage에 저장하고 불러오기

❓로컬스토리지란?

localStorage는 웹 스토리지 객체이다. 브라우저 내에 키-값 형태로 저장할 수 있다. 또한, 브라우저 창을 닫아도 정보가 남아있다.

프로젝트를 하며 코디네이터인지 혹은 유저인지에 따라서 페이지의 설명이 달라져야하는 상황이 생겼다.
쉽게 하자면 페이지를 각각 만들어서 링크로 연결해줄수도있었지만, 최대한 불필요한 페이지를 빼고 싶어서 방법을 찾던와중 로컬스토리지 라는 걸알게 되었다.

1. localstorage에 저장하기

localStorage.setItem('mode', 1);

2. 저장한 값 가져오기

localStorage.getItem('mode')

응용 - 내가 선택한 값에 따라 페이지의 멘트가 다르게 나오게 하기

💬 상황

아우터인지 피터인지 선택한 여부에 따라서 최종 페이지멘트가 다르게 나와야한다.

아우터모드 피터모드 를 담고있는 박스 컴포넌트에 해당 코드를 추가해준다.

Box.js

props.mode === '아우터 모드' ? 
localStorage.setItem('mode', 1) : 
localStorage.setItem('mode', 2) 

이렇게 로컬스토리지에 저장한 후에 잘 저장되었는지 확인하기 위해서는
개발자 모드 → Application → Storage 의 로컬 스토리지

내가 저장한 키이름과 값이 제대로 잘 저장되어있음을 확인할 수있다.

이렇게 저장된 값을 꺼내서 각각의 모드에따라 텍스트가 바뀌어야한다.

<QuestionMode content={localStorage.getItem('mode') == 1 ?
'회원가입이 완료 되었습니다!오늘도 예쁜 코디 부탁드려요':
'회원가입이 완료 되었습니다!오늘도 딱 맞는 코디 받으세요'}/>

로컬스토리지에서 mode라는 키값을 꺼낸 후 값이 1이면?
코디네이터에 맞는 멘트가 나오고
1이 아니라면?
유저에 맞는 멘트가 나오도록 설정해두었다.