TIL #8 - 로컬 스토리지 객체 값 사용하기

 

TIL #8 - 로컬 스토리지 객체 값 사용하기

 

 

 

 

 

📜 목표

• 로컬 스토리지 객체 값 사용하기

---

 

 

 

로컬 스토리지에 객체를 저장한 뒤 다른 컴포넌트에서 그 값을 사용할 일이 생겼다.

 

 

 

분명 나는 이 상태로 저장을 했는데

 

 

다른 컴포넌트에서 localStorage.getItem 을 사용하여 꺼내보니 이렇게 값이 나왔다.

 

이걸 인덱스로 접근하는건가? 싶었는데 그러면 그냥 문자열 처럼 작동하게 된다.

 

 

사실 로컬스토리지는 텍스트 자료만 저장 가능하다. 그래서 저장해놓고 불러오게 되면 이렇게 표시되는 것.

 

그러면 저장할 때 JSON형태의 문자열로 저장을 하면 되겠다!

 

 

 

 

바로 JSON.stringfy와 JSON.parse 를 이용하는 법이다.

 

 

 

객체를 저장하는 장소에서는 JSON.stringfy를 사용하여 로컬스토리지에 객체를 저장하고

 

이 값을 불러오는 장소에서는 로컬스토리지에 저장되어 있는 값을 불러와 JSON.parse를 사용하면 된다.

 

 

 

객체를 저장하는 컴포넌트

 

 

 

객체를 불러오는 컴포넌트

 

 

 

이렇게 사용하면

 

 

 

 

이렇게 정상적으로 저장한 객체를 그대로 불러올 수 있다.

 

 

 

---

 

👨‍💻 마무리

 

이 값을 잘 사용하면 회원가입 도중 이전값으로 돌아갈때 입력했던 정보들을 다시 되살릴 수 있는 기능까지 만들어 볼 수 있겠다.

 

또 열심히 개발하러 가자~