웹 애플리케이션을 만들다보면 어떤 데이터를 저장하기 위해서는, 네트워크 통신을 통해 서버에 저장을 해야한다. 하지만 작은 또는 임시로 저장할 데이터까지 모두 서버에 저장해야 하는걸까?
이런 고민은 해결해주는 것이 웹의 데이터를 클라이언트에 저장할 수 있게 한, HTML5의 Web Storage 스펙이다.
Web Storage
Web Storage는 key와 value의 쌍으로 데이터를 저장하고, key를 이용해 데이터 값을 가져온다. 이런 Web storage는 데이터의 스코프와 생명주기에 따라 2가지의 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
1 2 3 4 5 6 |
// 세션기간에 무관하게 브라우저에 저장 localStorage.setItem(key, value); // 브라우저 종료 후 다시 접속했을 경우에도 해당 데이터 값 이용 가능 localStorage.getItem(key); |
sessionStorage
1 2 3 4 5 6 |
// 세션기간 동안 브라우저에 저장 sessionStorage.setItem(key, value); // 브라우저 종료 시 데이터 값 삭제 sessionStorage.getItem(key); |
브라우저 지원 현황(‘17.02.06기준)

현재 날짜의 지원 여부는 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 – 요소검사 > 저장소 > 로컬스토리지/세션스토리지