웹/Node.js
[node.js] 쿠키, 로컬 스토리지, 세션 스토리지
검은젤리곰
2020. 3. 24. 15:07
쿠키(cookie)
쿠키는 클라이언트가 서버에게 자신이 누구인지 알리는 신분증의 역할을 한다.
서버는 요청을 받을 때 이 요청만으로는 누구에게서 왔는지 알 수 없기 때문에 매 요청마다 클라이언트에 대한 정보가 담긴 쿠키를 함께 보낸다. 쿠키는 4kb의 용량 제한이 있다. 그런데, 요청을 보낼 때 마다 쿠키가 함께 전송되는데, 이 안에는 서버가 당장 필요하지 않은 정보도 함께 보내지기 때문에 그만큼의 낭비가 발생하게 된다. 그런 데이터들을 이제 로컬/세션 스토리지에 저장할 수 있게 되었고, 스토리지에 저장된 데이터는 매번 서버로 전송되지 않는다.
로컬 스토리지(local storage)와 세션 스토리지(session storage)
로컬 스토리지와 세션 스토리지는 HTML5부터 추가된 저장소이다. 용량은 기기/브라우저 별로 상이하지만, 모바일은 2.5mb, 데스크탑은 5~10mb정도의 용량을 가진다. 둘 모두 키와 밸류를 저장할 수 있다. 둘의 차이점은 로컬 스토리지는 사용자가 직접 지우지 않는 이상 브라우저에 계속 남아있게 된다. 하지만 세션 스토리지는 인터넷 브라우저의 탭을 닫는 순간 데이터가 삭제된다. 이 특성 때문에 지속적으로 필요한 정보는 로컬 스토리지에, 지속적으로 저장되어서는 안되고 일시적으로만 사용 될 정보는 세션 스토리지에 저장된다.
둘 모두 같은 메소드를 사용하며, 앞에서 설명했듯이 데이터의 유지 여부에 차이가 있다.
setItem(key, value) | 키와 밸류를 스토리지에 저장한다. |
getItem(key) | 해당 키와 매칭되는 밸류를 가져온다. |
removeItem(key) | 해당 키와 밸류를 스토리지에서 삭제한다. |
clear() | 모든 키와 밸류를 삭제한다. |
length | 저장된 변수의 개수를 가져온다. |
사용 예)
1
2
3
|
sessionStorage.setItem('yang','woohyun')
sessionStorage.getItem('yang')//woohyun
sessionStorgae.removeItem('yang')//
|
cs |