[WEB] 쿠키, 세션스토리지, 로컬스토리지

  쿠키  

• 만료 기한이 있는 키-값 형태의 저장소.
• 용량이 4kb로 작음.
• 암호화 없음.(유저 정보 도난의 위험성 존재)

 

1. 쿠키 동작 방식

• 클라이언트가 페이지 요청.
• 서버에서 쿠키 생성.
• HTTP 헤더에 쿠키를 포함시켜 응답.

 

2. 쿠키 사용 예

• "아이디와 비밀번호를 저장하시겠습니까?"
• 쇼핑몰 장바구니
• 다시 보지 않음 팝업 창

 

3. 웹 스토리지 등장

• HTTP프로토콜에서 서버는 클라이언트가 누구인지 확인해야 함.(connectionless, stateless)
• 이 때, 쿠키에 나에 대한 정보를 담아서 서버로 보내면 서버는 쿠키를 읽어 클라이언트가 누군지 확인.
• 즉, 쿠키는 로컬과 서버 모두에 데이터를 저장하고 비교를 할 때마다 api호출.
• 쿠키는 서버와 클라이언트 간의 지속적인 데이터 교환을 위해 만들어졌기 때문에 서버로 전송이 계속 됨.
• 서버에 필요하지 않은 데이터도 있을 수 있으므로 데이터 낭비 발생 가능.
• 그래서 세션 스토리지와 로컬 스토리지에 저장. 이 둘은 서버로 자동 전송되지 않고 용량도 큼.

 

  웹 스토리지  

• 쿠키가 용량이 작고, 서버에 부담이 되며 암호화가 취약하다는 단점을 보완하고자 HTML5에서 웹 스토리지 탄생.
• 브라우저마다 차이가 있지만, 약 5Mb로 쿠키보다 용량이 크다.

 

1. 세션 스토리지

• 쿠키를 기반으로 하지만, 유저 정보를 서버에서 관리.
• 따라서 쿠키보다 보안에 좋지만, 유저가 많아질수록 서버 메모리를 많이 차지함.
• 창을 닫으면 데이터 삭제.
• 일회성 로그인 같은 경우에 사용.

 

2. 로컬 스토리지

• 유저가 지우지 않는 한 데이터 영구 저장.
• 이외에는 세션스토리지와 동일.
• 자동 로그인 같은 경우에 사용.