Webstorage & Cookies

GyungHo Go·2020년 4월 23일

웹 스토리지와 쿠키

웹 스토리지 (web storage)는 서버가 아닌, 클라이언트에 데이터를 저장할 수 있도록 지원하는 HTML5의 새로운 기능이다. 쿠키의 단점을 보완해서 HTML5에서 웹스토리지라는 기술이 탄생했다.

웹 스토리지와 쿠키의 기능 자체는 유사하지만, 쿠키는 약 4KB까지 밖에 저장 공간을 이용하지 못하는 반면에 웹 스토리지는 약 5MB까지 저장 공간을 이용할 수 있다. 웹 스토리지의 최신 스펙은 https://www.w3.org/TR/webstorage/에서 확인할 수 있다.

웹 스토리지에는 로컬 스토리지 (local Storage)와 세션 스토리지 (session Storage)가 있다. 로컬 스토리지와 세션 스토리지는 각각의 고유한 특성이 있으며, 프로그래머의 필요에 따라 선택적으로 사용된다. 다음 항목에서는 로컬 스토리지와 세션 스토리지에 대한 각각의 특성에 대해 설명한다.

[1]로컬 스토리지(Local Storage)

로컬 스토리지는 브라우저에 반영구적으로 데이터를 저장하며, 브라우저를 종료해도 데이터가 유지된다. 브라우저 자체에 반영구적으로 데이터가 유지되지만, 도메인 (domain)이 다른 경우에는 로컬 스토리지에 접근할 수 없다. 예를 들어, googlo.com 에서 로컬 스토리지에 저장한 데이터를 naver.com에서 접근할 수 없는 것과 같다.

[2]세션 스토리지(Session Storage)

세션 스토리지는 각 세션마다 데이터가 개별적으로 저장된다. 예를 들어, 브라우저에서 여러개의 탭을 실행하면 탭마다 개별적으로 데이터가 저장되는 것이다. 세션 스토리지는 세션을 종료하면 데이터가 자동으로 제거되며, 같은 도메인이라도 세션이 다르면 데이터에 접근할 수 없다.

인터넷 익스플로러 IE(Internet Explorer)는 10MB의 공간을 사용할 수 있고, 그 외 브라우저는 대부분 5MB의 공간을 사용할 수 있다. 사실 로컬 또는 세션스토리지 모두 사용되는 부분이 한정적이고 대부분 텍스트 공간을 차지하므로 용량이 부족하다던가의 이슈는 대부분은 없을 것이다.

localStorage, sessionStorage가 사용되는 경우
대부분의 데이터의 경우 데이터베이스에 저장하므로 로컬 및 세션 스토리지가 사용되는 곳은 그리 많지 않다. 대부분 임시적인 용도 또는 캐시, history 기능을 위하여 사용된다. 아래의 경우가 그 예이다.

글 작성 중간 중간에 잃어버리지 않기 위한 임시 저장용도

장바구니나 좋아하는 콘텐츠 등 수시로 변경되는 경우

방문자의 이동 경로를 저장하였다가 이동할 경우

그 외 서버에 반드시 저장할 필요가 없는 경우

[3]쿠키(Cookies)

쿠키는 만료기한이 있는 key/value 형태의 저장소이며, 대부분의 브라우저가 지원하지만 매 HTTP 요청마다 포함되어 api호출로 서버에 부담이가고 용량이 4kb로 적으며 암호화가 불가능하여 사용자 정보의 도난 위험이 있다.

쿠키는, 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재하고, 소멸시간을 지정 할 수 있으며 4kb 내의 데이터만 보관할 수 있습니다. 또한 매 http 통신시 쿠키정보가 함께 전송이 되기 때문에 로컬/세션 스토리지를 사용할때보다 미세하게 나마 통신속도가 느립니다. 불필요한 자원이 사용되는 샘입니다.

각 예 - 어떤 유형의 데이터를 어디에 저장하면 좋을까?

자동 로그인 -> 로컬스토리지
입력 폼 정보 -> 세션스토리지
비로그인 장바구니 -> 세션스토리지
다시 보지 않음 팝업 창 -> 쿠키

값 가져오는 법

로컬 스토리지
localStorage.A (Key == A)
localStorage.getItem("A")
세션 스토리지
sessionStorage.A (Key == A)
sessionStorage.getItem("A")
쿠키
getCookie("A") (Key == A)

스토리지에서 값 가져오는 법

웹스토리지와 쿠키에 접근해서 값을 가져오는 방법은 다음과 같다.
localStorage.getItem("A")
sessionStorage.getitem("A")
getCookie("A")
웹스토리지와 쿠키에 새로운 정보를 세팅하는 법은 다음과 같다.
localStorage.setItem("A",1)
sessionStorage.setItem("A",1)
setCookie("A",1,7) --> 만료기한 : 7일

세팅하는 법

로컬 스토리지
localStorage.A = 1 (Key == A, Value = 1)
localStorage.setItem("A", 1)
세션 스토리지
sessionStorage.A = 1 (Key == A, Value = 1)
sessionStorage.setItem("A", 1)
쿠키
setCookie("A", 1, 7) (Key == A, Value == 1, 유효기간 == 7초)

cookie 장점 : 어지간한 브라우져에는 지원이 다됨

cookie 단점 : api가 한번 더 호출되므로 서버에 부담증가/ 쿠키자체의 용량이 적음

LocalStorage 장점 : 서버에 불필요하게 데이터 저장안함/ 용량이 큼

LocalStorage 단점 : HTML4만 지원되는 브라우져라면 지원이 안됨...

SessionStorage의 장단점은 LocalStorage와 동일하다 LocalStorage와 단지 기능차이일뿐이다.