[자바스크립트]웹 스토리지(LocalStorage, SessionStorage)사용법

기본 API

 

웹 스토리지는 기본적으로 키(key)와 값(value)으로 이루어진 데이터를 저장할 수 있다.

개념적으로 해시 테이블 자료 구조를 생각하면 이해가 쉬울 것!

자바스크립트 API의 기본적인 사용 방법은 다음과 같다.

//키에 데이터 쓰기
localStorage.setItem("key", value);

//키로부터 데이터 읽기
localStorage.getItem("key");

//키의 데이터 삭제
localStorage.removeItem("key");

//모든 키의 데이터 삭제
localStorage.clear();

//저장된 키/값 쌍의 개수
localStorage.length;

💡주의 사항

웹 스토리지를 사용할 때 주의해야할 부분이 한가지가 있다!

오직 문자형(string)데이터 타입만 지원한다는 것!

웹 스토리지를 사용할 때 이러한 부분 때문에 많이 사용하는 방법이 JSON 형태로 데이터를 읽고 쓴다!

>localStorage.setItem('json', JSON.stringify({a:1,b:2}))
>undefined

>JSON.parse(localStorage.getItem('json'))
{a: 1,b: 2}

위와 같이 로컬 스토리지에 쓸 데이터를 JSON 형태로 직렬화(serialization)하고, 읽은 데이터를 JSON 형태로 역직렬화(deserialization) 해주면 원본의 데이터를 그대로 얻을 수 있겠다.

 

배열형 데이터를 로컬 스토리지에 저장할 때도 동일한 방법으로 문제를 예방할 수 있다.

> localStorage.setItem('nums', JSON.stringify([1,2,3,]))
undefined
>JSON.parse(localStorage.getItem('nums'))
[1,2,3]