MemoProject) localStorage에 보관해보기

memo-project를 클론코딩하며 단순히 화면만 그려내는것이 아니라, 데이터를 로컬스토리지에 저장하여 브라우저창이 껐다 켜질때도 기록이 남도록 하였다. 그 과정에서 로컬스토리지를 사용했던것을 기록해보기

localStorage.setItem('id', 'test');
localStorage.setItem('age', 80);

로컬스토리지는 키-값 쌍으로 데이터를 넣을 수 있다. 그때 값은 모두 스트링으로 들어간다. 하여 데이터 값을 getItem으로 불러와도 모든 값은 스트링으로 넘어온다. 그러므로 값이 넘버타입인 age인 키를 불러와도

localStorage.getItem('age'); // '80'

결과는 '00' 싱글쿼터가 붙은형태의 스트링으로 값이 넘어온다. 그리고 진행하며 이것이 스트링으로만 넘어온다면 생기는 문제점은 이것이었다.

localStorage.setItem('memo', [{title: 'memo1', content: 'content1'}, {title: 'memo2', content: 'content2'}])

메모리스트는 배열안에 데이터를 담은 오브젝트들이 쌓이는 형태로 들어가게 되는데 그렇게 했을 때 setItem으로 불러오면

localStorage.getItem('memo');
// '[object Object]'

내가 넣은 내용과 다르게 불러와진다는것.
고로 정상적인 값을 가져오기 위해 JSON.stringify를 사용해 오브젝트로 변환을 시켜줘야 한다

localStorage.setItem('memo', JSON.stringify([{title: 'memo1', content: 'content1'}, {title: 'memo2', content: 'content2'}]))

이렇게하면 getItem을 해도

localStorage.getItem('memo');
// '[{"title":"memo1","content":"content1"},{"title":"memo2","content":"content2"}]'

내가 넣은 모양 그대로 나오는것을 확인할 수 있다.

하지만 추가적으로 데이터가 들어만 가는것이 아니고 나오기도 해야하는데 이 과정에서 저 상태의 데이터를 그냥 꺼내쓸수가 없다. 바로 데이터들이 전부 스트링화 되었기때문에 배열메소드를 사용중이라던가 객체에서 값을 꺼내올수가 없다는것.

이럴 때에는 JSON.parse를 사용해 string으로 변한 값들을 다시 객체화 시켜서 꺼내오면 된다.

JSON.parse(localStorage.getItem('memo'));
// (2) [{…}, {…}]
// 0: {title: 'memo1', content: 'content1'}
// 1: {title: 'memo2', content: 'content2'}
// length: 2
// [[Prototype]]: Array(0)

parse를 할때에는 localStorage.getItem('키네임') 자체를 변환값으로 넣어준다. 그리하면 위와같이 원본 형태의 값을 그대로 다시 꺼내올 수 있다