LocalStorage

기존에 데이터를 저장하는 방법으로는 변수를 배웠다. 하지만 변수를 수정하고 브라우저 창을 나갔다 들어오면 수정된 변수는 없어진다.

그렇다면 만약 브라우저를 나갔다 들어와도 데이터가 휘발되지 않으려면 어떻게 해야할까?

 

이에는 2가지 방법이 있는데 1. 서버를 만든다. / 2. LocalStorage를 이용한다. 

우리는 서버를 만들 수 없다는 가정하에 LocalStorage를 사용해보려고 한다. 

 

LocalStorage 란?

LocalStorage이외에 다른 브라우저 저장공간도 있는데 같이 알아보자.

 

LocalStorage

• 문자, 숫자만 key / value 형태로 저장가능하다
• 5MB까지 저장이 가능하다.
• 브라우저에 재접속해도 영구적으로 데이터가 남아있다. O

 

Session Storage

• 문자, 숫자만 key / value 형태로 저장가능하다
• 5MB까지 저장이 가능하다.
• 브라우저에 재접속하면 데이터가 사라진다. X

 

Indexed DB

• 크고 구조화된 데이터를 DB처럼 저장할 수 있다.
• 문법이 복잡하다.

 

Cache Storage

• 유저의 로그인 정보를 저장한다.

 

LocalStorage 사용법

[자료 저장]

localStorage.setItem('이름', 'kim')

 

[자료 출력]

localStorage.getItem('이름')

 

[자료 삭제]

localStorage.removeItem('이름')

---

 

[object/array 자료 저장]

var arr = [1,2,3];
var newArr = JSON.stringify(arr); //배열을 JSON으로 변경

localStorage.setItem('num', newArr)

 

[object/array 자료 출력]

var newArray = JSON.parse(꺼낸거);