로컬스토리지(LocalStorage)에 객체(Object) 저장하기

다양한 상황에서 로컬스토리지는 매우 유용하게 사용됩니다.

그리고 로컬스토리지에 다양한 값들을 저장하고 편리하게 사용하는데, 객체(Object)는 저장시에 그냥 저장하는 것이 아닌, 한 단계를 거쳐 저장을 해주어야 우리가 원하는 형태대로 저장하고 또 읽을 수 있습니다.

 

아래와 같은 오브젝트가 하나 있다고 가정합니다.

let person = { name: 'John', age: 26 }

 

이를 저장할 때, localStorage.setItem('personInfo', person) 과 같이 바로 저장을 하게 되면, 아래와 같이 [object Object] 값으로 저장이 되어 버립니다. 그렇다면 여기서 키-밸류를 가져와서 사용해야 하는 경우, 올바르게 데이터를 사용할 수 없겠죠.

 

원하는 JSON형태의 키-밸류가 아닌, object Object라는 string이 보여진다.

 

 

 

객체를 로컬스토리지에 저장하고 읽어올 때는 아래와 같이 JSON처리를 통해 쓰고 읽어오도록 하면 됩니다.

// 저장할 때, JSON.stringify() 를 이용해 JSON화(직렬화) 시켜줍니다.
localStorage.setItem('personInfo', JSON.stringify(person));

// 읽어올 때, JSON.parse() 를 이용해 JSON 형태로 파싱합니다.
localStorage.getItem(JSON.parse('personInfo'));

 

저장할 때는 JSON.stringify()를, 불러올 때는 JSON.parse() 를 사용하면 됩니다.

이와 같이 하면 다음과 같이 원하는 형태대로 저장되는 것을 확인할 수 있습니다.

 

정상적으로 키-밸류로 구성된 객체가 보여진다.