쿠키, 세션, 웹 스토리지 (localStorage, sessionStorage)

데이터를 저장하는 방식 : 쿠키, 로컬 스토리지, 세션 스토리지 

서버와의 연결이 끊겨도 기억하고 싶은 데이터, 클라이언트의 상태를 기억할 수 있도록 세션, 쿠키, 스토리지가 생성되었다. 

 

쿠키 (Cookie)

클라이언트와 서버의 연결이 끊겨도 정보를 기억하기 위해 서버에서 데이터를 묶어서 클라이언트의 컴퓨터나 브라우저 메모리에 저장되는 key, value 로 이뤄진 텍스트 파일이다. 

• 브라우저를 종료 해도 데이터가 유지된다. 
• 한 사이트 당 20개의 쿠키를 가질 수 있다. 
• 만료 기한을 지정할 수 있다. 
• 단, 쿠키에 값이 많아지면 네트워크 트래픽이 증가할 수 있어서 주의해야한다. 
• ex) 로그인 정보 기억하기, 쇼핑몰 장바구니 

 

세션 (Session)

서버에서 데이터를 관리하고 고유 ID 를 생성해 클라이언트를 식별하는 방법이다. 

 

웹 스토리지 (Web Storage)

HTML5 부터 추가된 클라이언트 기반 key-value 저장소이다. 
웹 스토리지 종류로는 로컬 스토리지, 세션 스토리지 가 있다. 

//로컬 
function setLocalStorage(key, value){ localStorage.setItem(key,JSON.stringify(value)); } 

//세션 
function setSessionStorage(key, value){ sessionStorage.setItem(key,JSON.stringify(value)); }

• 로컬 스토리지는 브라우저를 종료해도 데이터를 영구 보관한다. 
• 로컬 스토리지는 도메인이 같으면 데이터가 공유되는 특성을 가진다. 
• 세션 스토리지는 브라우저가 종료되면 데이터가 삭제된다. 
• 도메인이 같아도 브라우저가 다르면 각각 세션 스토리지를 가져서 데이터가 공유되지 않는다. 
• 웹 스토리지는 쿠키와 달리 서버에 전송되지 않아 서버에 부담이 가지 않는다. 
• 용량도 쿠키에 비해 넉넉하다!