web cookie와 web storage

웹쿠키

• 쿠키는 웹사이트 접속시 접속자의 개인장치에 다운로드 되고 브라우저에 저장되는 작은 텍스트 파일이다.
  ex> 사용자가 사이트를 방문하여 이용할 때 브라우저에 저장되는 내용들로,
  브라우저는 사용자의 컴퓨터에 있기에 사용자가 갖고 있는 정보라 생각하면 된다.

쿠기에는 규칙이 있다.
1. domain scope, 쿠키는 1개의 도메인에 한정되어 있다.
ex>페이스북에 의해 생성된 쿠키는 넷플릭스로 보낼 수 없다.
페이스북이 만든 쿠기는 오직 페이스북 안에서만 보내질 수 있다.
2. sent automatically, 쿠기들은 자동으로 보내진다.
ex>서버는 원하는 만큼 쿠기를 보낼 수 있고 브라우저는 자동으로 그걸 저장한다.
3. set automatiacally, 자동으로 설정된다.

2. 목적?
   세션 관리(Session management)
   서버에 저장해야 할 로그인, 장바구니, 게임 스코어 등의 정보 관리
   개인화(Personalization)
   사용자 선호, 테마 등의 세팅
   트래킹(Tracking)
   사용자 행동을 기록하고 분석하는 용도

웹사이트를 방문 시 로그인하고 다시 웹사이트 방문하면 로그인 상태가 유지된다.
접속할 때 마다 서버쪽에서 우리가 로그인한 것을 알고 있다.
이를 http 프로토콜은 상태가 없다라고 표현한다.
상태가 없다는 건 접속할 때 마다 이전에 접속했던 상태를 다음 접속이 알 수 없다.
이전에 로그인을 했다해도 그 다음에 접속 했을땐 이전에 로그인 했는지 안했는지 알 수 없다.
쿠키 기능을 이용하면 로그인 시 로그인 기록이 남고 쇼핑 몰에서 쇼핑 카트를 이용하면 어떤 상품이 장바구니에 담겼는지 쿠키라는 걸 통해 알 수 있다.
쿠키 > 세션 > 인증 (회원가입, 승인, 로그인)

쿠키를 활용하여 만든 어플리케이션
같은 사이트인데 접속한 브라우저 마다 사용자마다 다른 상태를 유지할 수 있다.

2. 웹 스토리지 - 클라이언트에 정보를 저장하는 key-value형태의 데이터

1. localStorage ? 로컬에 도메인 별로 지속되는 storage

• 가볍게 사용하기 좋은 대신 기능이 많진 않다. 데이터를 만료기간 없이 계속 사용가능하다.

2. sessionStorage? 세션이(프로세스, 탭, 브라우저) 종료될 때까지 지속되는 storage

• 브라우저를 종류하거나 새탭을 열거나 할 때 세션스토리지의 데이터는 초기화된다.
  같은 탭에서 새로고침 될 때는 그대로 유지된다.
  자동 임시서장같은 것으로 사용될 때 좋다.
  로그인 창에 아이디를 자동완성하거나 공지 메세지를 하루 안보기 하거나
  쇼핑몰 사이트에서 로그인 안한 상태로 장바구니에 담는 등
  사용자의 편의를 위하되 지워지거나 조작되거나 가로채도 큰 일은 없을 그런 수준의
  정보들을 브라우저에 저장되는데 사용된다.

3.세션

• 세션을 사용하는 사이트에 접속하면 서버에서는 사용자를 구분하기 위해 기한이 짧은 임시 키 하나를 브라우저로 보내 쿠키로 저장한다. 사용자의 중요한 정보들은 서버의 메모리나 데이터 베이스에 저장이된다.
• 브라우저가 사이트의 페이지에 접속 할 때 마다 http요청에 이 키가 담긴 쿠키를 실어서 전송하고 서버는 그 키를 보고 어떠한 사용자인지를 인식해서 그 사용자의 정보를 가공해서 응답으로 보내준다.

• 우리가 네이버에 로그인한 뒤 다른 페이지를 이용할 때마다 로그인 할 필요가 없는건 쿠키와 세션의 조합으로 우리의 컴퓨터에서 네이버에 로그인해있다는 것을 네이버 서버가 인지하고 있기 때문이다.
  사용자나 다른 누군가에게 노출되어서안되는 서비스 제공자가 직접 관리해야하는 내용들은 세션으로 서버안에서 다뤄진다.

4. 캐시

• 웹 뿐만 아니라 컴퓨터의 메모리 부분이나 안드로이드 등 다양한 곳에 쓰이는데 공통적으로 가져오는데 비용이 드는 데이터를 한 번 가져온 뒤에는 임시로 저장해두는 거다. 웹 캐시는 이미지 정보를 불러올 때 데이터 사용량도 발생하고 시간도 들기 때문에 사용자가 여러번 방문할 법한 사이트에서는 한 번 받아온 데이터를 사용자의 컴퓨터 또는 중간 역할을 한느 서버에 저장해 둔다.