[JS] localStorage 사용법

1. 글을 쓰는 이유

여태 진행했던 프로젝트에서 localStorage, sessionStorage를 사용했었는데, 이번에 개인적으로 진행하는 프로젝트에서도 사용하게 되었다. 하지만 저번 프로젝트에서는 boolean값이나 string, Number 값만 저장해봤었다. 이번에는 localStorage에 객체(object)를 저장해서 사용해야되는 기능을 구현하게 되었는데, 이상하게 기능이 잘 되지 않아 localStorage에 대해 알아보게 되었다.

2. localStorage에는 object 타입을 그대로 저장 할 수 없다

localStorage.setItem()을 할 때, js의 오브젝트는 저장할 수 없다.

따라서, js의 object 타입을 string 타입으로 변환하여 localStorage에 저장해야한다. 이때 사용되는 것은 JSON.stringify(), JSON.parse()이다.

3. JSON.stringify()

object(JSON)을 string 타입으로 바꿔주는 기능을 하는 함수이다.

tempObject = [{id:1, title:"JS", content:"funny"}, {id:2, title:"CSS", content:"beautiful"}];
localStorage.setItem('value',JSON.stringify(tempObject));

4. JSON.parse()

string타입으로 바뀐 object를 다시 object형식으로 바꿔주는 기능을 하는 함수이다.

let data = localStorage.getItem('value');
let parseData = JSON.parse(data);