[Javascript] localStorage

localStorage란 로컬 환경에 데이터 정보를 저장해서

브라우저를 다시 실행해도 데이터를 유지해주는 저장소이다.

로컬 스토리지는 개발자 도구를 열어 확인할 수 있다.

로컬 스토리지는 객체처럼 key-value 형태로 저장한다.

 

1) localStorage에 정보 저장하기

- setItem : localStorage 안에 정보를 저장할 때 사용하는 메소드

- localStorage.setItem(key, value);

localStorage

페이지를 새로고침해도 localStorage의 데이터가 유지되는 것을 확인할 수 있으며,

여기에 저장되는 값들은 모두 문자열 형태라는 특징이 있다.

 

2) localStorage에서 값 가져오기

- getItem : localStorage에서 정보를 가져올 때 사용하는 메소드

- localStorage.getItem('접근하고자 하는 key');

 

ex) localStorage에 있는 age의 value 값의 자료형 확인하기

age의 값인 100의 자료형을 확인하기 위해 getItem을 사용하여 값을 가져올 것이다.

이 값의 자료형을 확인하기 위해 typeof를 사용하여 콘솔 창에 출력할 것이다.

age의 value 값인 100이 문자열로 저장되었다는 것을 확인할 수 있다.

 

localStorage는 문자와 숫자뿐만 아니라 undefinde, null 같은 자료형도 저장할 수 있다.

그러나 이것들 모두 문자열 형태로 저장된다.

객체를 선언하고 setItem을 사용하여 localStorage에 저장해볼 것이다.

travel이라는 객체를 localStorage에 저장하니 [object Object] 형태로 저장된 것을 볼 수 있다.

객체는 문자열 형태로 저장되지 않기 때문에 그런 것이다.

 

객체를 localStorage에 저장할 때는 JSON.stringify를 사용해야 한다.

JSON.stringify를 사용하여 객체를 문자열로 변환 후 localStorage에 저장해보았다.

객체 형태로 잘 보존되어 저장된 것을 확인할 수 있다.

getItem을 사용하여 travel의 값을 가져와 콘솔 창에 출력하면

객체 형태가 아닌 문자열이 출력되는 것을 볼 수 있다.

이렇게 되면 객체 안에 key 값을 사용하여 접근할 경우 undefined가 나오게 된다.

(문자열은 객체처럼 key에 접근할 수 없기 때문)

 

이럴 때는 JSON.parse를 사용하여 문자열 형태였던 객체를 다시 객체 형태로 바꿔줘야 한다.

JSON.parse를 통해 문자열 형태였던 객체를 객체 형태로 변환한 후 

getItem을 사용하여 localStorage에서 값을 가져오니

제대로 된 객체 형태를 가져올 수 있었고,

그로 인해 객체 내부 key에도 잘 접근한 것을 볼 수 있다.

 

3) localStorage 값 삭제하기

- removeItem : localStorage에서 원하는 key 값 삭제할 때 사용하는 메소드

- localStorage.removeItem('삭제하고자 하는 key');

- clear :  localStorage에 저장된 모든 데이터 삭제할 때 사용하는 메소드

- localStorage.clear();

 

원하는 key 값만 삭제하기

모든 데이터 삭제하기

 

 

따라서 일반적인 문자열, 숫자, undefined, null 같은 데이터 타입은

setItem을 사용하여 localStorage에 문자열 형태로 저장하고,

getItem을 사용하여 localStorage에서 문자열 형태로 값을 가져온다.

 

객체는 JSON.stringify를 이용하여 객체를 문자열 형태로 변환 후

setItem을 사용하여 localStorage에 저장해서 객체 형태를 유지시키고,

getItem으로 localStorage에서 값을 가져올 때는

JSON.parse를 사용하여 문자열로 저장된 객체를 자바스크립트에서 객체로 인식하게끔 변환하는 작업이 필요하다.

 

마지막으로 localStorage에서 특정 key 값만 삭제하고 싶을 때는 removeItem을, 

모든 데이터를 삭제하고 싶을 때는 clear를 사용하면 된다.

---

강의 출처: 컴공 선배