웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

localStorage vs cookie 장단점

Last Modified : 2019-08-12 / Created : 2015-12-28
13,912
View Count

로컬 저장소를 웹에서 사용할 경우 가장 많이 사용되는 방법은 쿠기 그리고 로컬스토리지입니다. 이때 쿠키(Cookie)와 로컬스토리지(Local Storage)은 둘 다 다른 목적을 가지고 있기 때문에 무엇이 옮다고 하기는 애매한 부분이 있습니다. 각각의 쓰임새에 따라 적합한 방법을 선택해야 합니다. 하지만 그렇게 하기 위해서는 둘의 목적과 장단점, 그리고 명확한 차이를 알고 있어야 할 것 입니다. 아래는 이 둘을 사용할때 각각의 장점과 단점에 대하여 알아보도록 하겠습니다.



! Cookie vs LocalStorage

우선 쿠키는 서버측과 클라이언트측 양쪽에서 쿠키 데이터를 사용하는 api가 존재합니다. 이와 달리 localStorage는 로컬 환경에서만 컨트롤되죠. 이런 이유로 저장된 쿠키 데이터의 쓰임이 양쪽 모두이냐를 고려해야하며 만약 서버쪽 사용이 필수적이고 잦다면 로컬 저장소가 아닌 클라이언트와 서버와의 인터렉션이 좀 더 효과적인 쿠키값을 사용하는 것이 좋을 수도 있습니다.


! 저장 공간의 차이

무엇보다도 저장공간의 차이를 무시할 수 없습니다. 쿠키는 4096bytes 이하의 저장공간을 허용합니다. 그렇기 때문에 저장할 내용이 많은 경우 쿠키보다 로컬 저장소 사용이 훨씬 효과적일 것입니다. 왜냐면 로컬 저장소는 약 5MB의 공간을 허용하기 때문이죠.
 

! 기간 설정이 가능 여부

쿠키는 기본적으로 만료일(expiration day)을 함께 설정합니다. 만료일은 사용자가 삭제하지 않아도 일정 시간이 지나면 저장된 데이터를 사용할 수 없게 되는 것으로 특히 보안이나 내부 데이터 관련된 내용들이 쿠키사용에 더 적합할 수 있을 것입니다. 이에 반하여, 로컬저장소는 사용자가 임의로 삭제하지 않는 경우 삭제되지 않기 때문에 중요한 성격의 자료보다 단순한 보관 용도의 데이터 타입이 더 적합하게 사용할 수 있습니다.

@ 참고사항
html5는 세션 저장소(Session Storage)라는 세션 유지기간에만 사용가능할 API를 제공하니 참고하세요.


! 디바이스 및 브라우저 호환성

대부분의 브라우저에서 현재 localStorage와 같은 HTML5 API를 지원하고 있으나 아직 100% 완벽하지는 않으므로 호환성을 고려한다면 쿠키(cookie)의 사용이 더 나은 방법이 될 수 있습니다. 모든 브라우저 및 디바이스 호환성은 아무래도 예전부터 사용되는 cookie가 안정적이기 때문입니다.(현재 최신 브라우저는 대부분 html5의 api를 지원하니 참고하세요.)

Previous

제이쿼리 hover() 이벤트 배우기

Previous

[자바스크립트] 정규표현식을 사용하여 태그만 제거하기