쿠키(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

 

+ Recent posts