Web Storage(localStorage와 sessionStorage)

웹 애플리케이션을 만들다보면 어떤 데이터를 저장하기 위해서는, 네트워크 통신을 통해 서버에 저장을 해야한다. 하지만 작은 또는 임시로 저장할 데이터까지 모두 서버에 저장해야 하는걸까?

이런 고민은 해결해주는 것이 웹의 데이터를 클라이언트에 저장할 수 있게 한, HTML5의 Web Storage 스펙이다.

Web Storage

Web Storage는 key와 value의 쌍으로 데이터를 저장하고, key를 이용해 데이터 값을 가져온다. 이런 Web storage는 데이터의 스코프와 생명주기에 따라 2가지의 storage가 있다.

local storage
seesion storage

사실 이 Web Storage가 나오기 이전에도 Cookie를 통해 클라이언트에 저장하는 방법을 이용해 왔다. 하지만 이제는 애플리케이션과 데이터의 특성에 따라 Web Storage와 Cookie를 선택적으로 사용할 수 있게 되었다.

Web Storage 와 Cookie 비교

구분	Web Storage	Cookie
서버전송	자동으로 서버에 전송하지 않음	웹 요청시 마다 Server로 전송
사이즈	∙ 크롬, 파이어폭스, 오페라 : 5MB ∙ IE : 10MB ∙ 블랙베리 디바이스 : 25MB	사이트 별 최대 20개(4kB/개)
만료일자	만료일자의 설정이 없음	만료일자 지정을 통해 만료일자가 존재 (만료일자를 지정하지 않으면 ‘세션쿠키’)
인터페이스	string으로 된 key, value의 쌍으로 array 데이터 모델 사용하기 때문에 Cookie보다 좋음

Web Storage의 종류

Local Storage

localStoage는 브라우저 창을 닫더라도 지속적으로 데이터가 존재한다. 즉 특별히 데이터를 지우지 않는 이상 영구적으로 데이터가 존재한다.

Session Storage

sessionStorage는 해당 페이지가 존재하는 창의 생명주기로 해당 데이터가 존재한다. 즉 데이터를 저장한 웹페이지의 브라우저 창을 닫는다면 해당 데이터도 삭제된다. 또한 같은 웹사이트더라도 서로 다른 창으로 띄어 저장된 세션은 서로 간섭하지 않기 때문에 다른 창의 sessionStorage에 저장된 데이터를 조회할 수 없다.

사용법

localStorage와 sessionStorage는 window 레벨의 전역변수로 사용된다.

localStorage

// 세션기간에 무관하게 브라우저에 저장
localStorage.setItem(key, value);

// 브라우저 종료 후 다시 접속했을 경우에도 해당 데이터 값 이용 가능
localStorage.getItem(key);

// 세션기간에 무관하게 브라우저에 저장

localStorage.setItem(key, value);

// 브라우저 종료 후 다시 접속했을 경우에도 해당 데이터 값 이용 가능

localStorage.getItem(key);

sessionStorage

// 세션기간 동안 브라우저에 저장
sessionStorage.setItem(key, value);

// 브라우저 종료 시 데이터 값 삭제
sessionStorage.getItem(key);

// 세션기간 동안 브라우저에 저장

sessionStorage.setItem(key, value);

// 브라우저 종료 시 데이터 값 삭제

sessionStorage.getItem(key);

브라우저 지원 현황(‘17.02.06기준)

‘webStorage’ browser support in caniuse.com

현재 날짜의 지원 여부는 caniuse.com에서 확인하세요.

팁

Q. localStroage나 sessionStorage와 같은 Web Storage의 value에 array나 object의 값을 넣고 싶다면 어떻게 해야 할까?

JSON을 이용하자.

데이터를 저장할 때 : sessionStorage.setItem(key,JSON.stringify(value))

데이터 로드 후 이용할 때 : JSON.parse(sessionStorage.getItem(key))

Q. 브라우저에서 localStroage나 sessionStorage와 같은 Web Storage은 어떻게 확인할 수 있을까?

Chrome의 개발자도구를 이용하자

localStorage data : 크롬의 개발자도구 > Application > Storage > Local Storage

sessionStorage data : 크롬의 개발자도구 > Application > Storage > Session Storage

How to check web storage in Chrome-dev

타브라우저 :Firefox/Safari – 요소검사 > 저장소 > 로컬스토리지/세션스토리지