Cookie, Session, Local Storage

Cookie, Session, Local Storage

 

 

Local Storage

 

• window.localStorage에 위치하고 있음
• string, boolean, number, null, undefined 모두 저장 가능하지만, 문자열로 변환됨
• object 생성자 형으로 저장되어 한번에 통째로 저장하려면 JSON.stringify() 해야하고, 받을 때는 JSON.parse() 해야 함
• 최대 5MB의 정보를 저장 할 수 있으며 지우기 전까지 영구적으로 저장되어있음
  └ 자동 로그인 저장

 

 

Session Storage

 

• window.sessionStorage에 위치하고 있음
• HTTP session id를 식별자로 구별해 데이터를 사용자의 브라우저에 쿠키형태가 아닌 접속한 서버 DB에 정보를 저장함
• 메모리에 저장하기 때문에 브라우저가 종료되면 삭제됨
  └ ex) 입력 폼 정보 저장, 비로그인 장바구니

 

 

Cookies

 

• 사용하는 user를 기억하기 위해서 만들어짐
  └ Authorization (인증)
• HTML은 stateless로써 항상 기억하지 못하므로 cookies를 사용해서 기억해야하는 정보를 가짐
  └ ex) 만약 language를 "한국어"로 선택하면 cookies는 기억했다가 문서를 한국어로 보여줌
• 만료기한 이 있으며 서버와 지속적으로 통신됨
  └ 영구쿠키를 원한다면 만료일자를 멀게 설정하면 됨
• 대부분의 브라우저에 지원이 된다는 장점은 있지만 맹 HTTP 요청마다 포함되어 api 호출로 서버에 부담을 줄 수 있고, 쿠키용량은 약 4KB정도로 작고 제한적이며, 암호화가 되지 않아 user 정보 도난 위험이 발생할 수 있음

 

cookie가 가진 규칙

 

• domain scoped : 쿠키 1개의 도메인에 한정되어 사용됨
  ┌ ex) facebook에서 사용된 쿠키를 netflix에서 읽을 수 없음
  ├ 하지만, 만약 다른 사이트에서 facebook link, facebook icon 등을
  └ 요청을 하게 되는 경우 페이스북에서 내 쿠키를 가져갈 수 있음
• sent Automatically : 쿠키는 자동으로 보내짐
• set Automatically : 쿠키는 자동으로 세팅됨

 

 

Cookies와 Session의 차이

 

• 저장 위치
  ┌ Cookie : Client의 Web browser가 지정하는 메모리 or 하드디스크에 저장
  └ Session : 서버의 메모리에 저장
• 만료 시점
  ┌ Cookie : 저장 시, expires 속성을 정의해서 무효화 시키면 삭제될 날짜 지정 가능
  └ Session : Client가 로그아웃 하거나, 설정시간 동안 반응 없으면 무효화 되므로 정확한 시점을 알 수 없음
• 리소스
  ┌ Cookie : Client에 저장되고, Client 메모리를 사용하므로 서버 자원 사용하지 않음
  └ Session : 서버에 저장되고, 서버 메모리로 로딩되므로 세션이 생길 때마다 리소스를 차지함
• 용량 제한
  ┌ Cookie : Client도 모르게 접속되는 사이트에 의해서 설정 될 수 있으므로 쿠키로 인해 문제가
  ├             발생하는 것을 막고자 한 도메인 당 20개, 하나의 쿠키당 4KB로 제한해 둠
  └ Session : Client가 접속하면 서버에 의해서 생성되므로 갯수, 용량 제한 없음