브라우저 저장소 ( Local, Session, Cookies)

우선 각각에 대해서 알아보도록 하자!

Local Storage

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

Session Storage

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

Cookies

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

[ cookie가 가진 Rule! ]

1. Domain scoped : 쿠키Domain scoped : 쿠키 1개의 도메인에 한정되어 사용된다
   ex) facebook에서 사용된 쿠키를 netflix에서 읽을 수 없다
   ex) BUT! 만약 다른 사이트에서 facebook link, facebook icon 등을 요청(request)을 하게 되는 경우 페이스북에서 내 쿠키를 가져 갈 수 있다

2. Sent Automatically : 쿠키는 자동으로 보내진다

3. Set Automatically : 쿠키는 자동으로 셋팅된다

---

local storage와 session storage를 합쳐서 Web storage라고 하는데, 쿠키 단점을 보완해 HTML5에 '추가'(쿠키를 완전 배제 하지 않은채로) 된 저장소이다.

• 이전 버전은 지원하지 않는다.
• 이전에는 브라우저 저장소로 쿠키를 사용했다.
• 간단한 key와 value를 저장 할 수 있고, windows의 객체 안에 들어있다.
• key-value 형태의 스토리지 형태이다.

*** 로그인 구현 할 때, 자동 로그인을 원한다면 로컬 스토리지, 브라우저를 닫았을 때 로그인이 풀리는 것을 원한다면 세션 스토리지

---

[ Cookies와 Session의 차이 ]

[ 저장 위치 ]

• Cookie : Client의 Web browser가 지정하는 메모리 or 하드디스크에 저장
• Session : 서버의 메모리에 저장

[ 만료 시점 ]

• Cooke : 저장 시, expires 속성을 정의해서 무효화 시키면 삭제될 날짜 지정 가능
• Session : Client가 로그아웃 하거나, 설정시간 동안 반응 없으면 무효화 되므로 정확한 시점 알 수 없음

[ 리소스 ]

• Cooke : Client에 저장되고, Client 메모리를 사용하므로 서버 자원 사용하지 않는다.
• Session : 서버에 저장되고, 서버 메모리로 로딩되므로 세션이 생길 때마다 리소스를 차지한다.

[ 용량 제한 ]

• Cooke : Client도 모르게 접속 되는사이트에 의해서 설정 될 수 있으므로 쿠키로 인해 문제가 발생하는 것을 막고자 한 도메인 당 20개, 하나의 쿠키당 4KB로 제한해 둔다
• Session : Client가 접속하면 서버에 의해서 생성되므로 갯수, 용량 제한 없다.