[localStorage] DB없이 web에 데이터를 저장하는 방법

데이터를 저장하는 방법은 대표적으로 DB서버에 저장하여 불러오는 방법이 있다.

 

F12 키로 개발자도구를 켜서 콘솔창에  다음을 입력한다.

localStorage.setItem('name', 'Kim')

그러면 key가 'name'이고 value가 'Kim'인 데이터가 localStorage에 저장된다.

확인하는 방법은 개발자도구 Application탭을 들어가면 Local Storage가 있다.

 

 

자료를 출력하는 방법

localStorage.getItem('name')
// "Kim"

key에 해당하는 value가 출력된다.

 

자료를 제거하는 방법

localStorage.removeItem('name')

이번엔 key에 해당하는 value가 제거 된다.

 

그럼 객체나 배열형 자료도 저장이 될까?

저장은 되지만 출력 할때 문자열로 출력되는 문제가 생긴다. 애초에 문자열로만 저장이 되기 때문이다.

 

 

객체 자료형으로 저장하기 위해서는 JSON.stringify()라는 함수로 감싸서 저장해 주면 된다.

(JSON 형식으로 저장해줌)

 

출력은 변수에 담아서 JOSN.parse()로 감싸서 출력을 하면 된다.