브라우저 저장소 (쿠키, 로컬 스토리지, 세션 스토리지)

브라우저 저장소(Web Storage)는 HTML5부터 추가된 저장소로 쿠키(cookie)와 비슷한 기능이다.

 

 쿠키(Cookie)

개발자가 아니어도 브라우저를 사용하다보면 쿠키라는 용어에 대해 쉽게 목격한 적이 있을 것이다. 쿠키란 웹사이트에 의해 유저의 정보를 저장하는 것이다. 서버와 데이터를 공유하는 용도로 사용되며 데이터의 유효기간을 지정이 가능하다. (ex: 1시간 뒤, 하루 뒤) 장점으로는 대부분의 브라우저가 지원을 한다는 점이지만 단점으로는 4kb 데이터 저장 제한으로 사이즈가 매우작고 서버에 매 HTTP 요청으로 데이터 전달 낭비가 발생한다는 점이다. 팝업창 다시 보지 않음 기능에 사용된다.

 

 로컬 스토리지(Local Storage)

가볍지만 기능이 많지 않고 단순히 key(키):value(값)을 String 타입으로 저장하는 기능만 있다. 최대 저장용량은 5~10MB로 제한하여 간단한 텍스트만 담을 수 있지만 만료기간 없이 저장이 가능하여 자동로그인에 사용된다.

localStorage.setItem('age', 30);
localStorage.getItem('age'); // '30' (문자열)
localStorage.removeItem('age'); // null
localStorage.null

// 객체를 저장할 때
localStorage.setItem('object', JSON.stringfy({a : 'b'}));
JSON.parse(localStorage.getItem('object')); // {a : 'b'}

 

 세션 스토리지(Session Storage)

로컬 스토리지와 달리 만료기간이 있어 브라우저를 종료하거나 새탭을 열 때 데이터가 초기화가 된다. (같은 탭에서 새로고침 시에는 데이터가 유지됨) 즉, 로컬 스토리지와 세션 스토리지의 차이는 바로 영구성이다. 자동 임시 저장 용도로 쓰이는데 예를들어 입력폼 정보 저장, 비로그인 장바구니, 글쓰기 도중 내용 복구하기가 있다. 사용법은 위의 로컬 스토리지와 동일하다.

 

 쿠키 vs 스토리지

쿠키는 대부분의 브라우저가 지원하지만 스토리지는 브라우저와 디바이스 등의 환경을 많이 타기때문에 제대로 작동하지 않을 수도 있다. 그래서 꼭 필요한 정보는 서버에서 관리를 하고 스토리지는 있으면 좋은 기능을 구현할 때 쓰면 좋다. 쿠키의 용량은 4kb로 매우 작기 때문에 표준 한페이지당 5mb로 권장되는 스토리지를 사용하면 key, value 값만 저장하기에 충분히 큰 사이즈이다. 그리고 보안적인 측면에서 쿠키는 매HTTP요청마다 암호화 없이 전달되기 때문에 도청당하면 정보를 쉽게 도난당할 수 있고 스토리지는 HTTP요청 때 마다 서버에 전달되지 않기 때문에 자원낭비가 적고 표준을 지켜서 설계하면 보안도 강화된다.

 

참고 사이트

velog.io/@design0728/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C-LocalStorage-SessionStorage-Cookie

velog.io/@gay0ung/%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A0%80-%EC%A0%80%EC%9E%A5%EC%86%8C

www.zerocho.com/category/HTML&DOM/post/5918515b1ed39f00182d3048

isme2n.github.io/devlog/2017/06/21/storage-cookie/

velog.io/@kler/TIL4-%EB%A1%9C%EC%BB%AC%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%84%B8%EC%85%98%EC%8A%A4%ED%86%A0%EB%A6%AC%EC%A7%80-%EC%BF%A0%ED%82%A4-%EC%A0%95%EB%A6%AC