Local storage , Session storage , Cookie

WEB STORAGE

HTML5에는 웹 사이트의 데이터를 클라이언트에 저장할 수 있는 새로운 자료구조인 WebStorage 스펙이 포함되어있다.

Web Storage의 개념은 키/값 쌍으로 데이터를 저장하고 키를 기반으로 데이터를 조회하는 패턴이다.

그리고 영구저장소(LocalStorage)와 임시저장소(SessionStorage)를 따로 두어 데이터의 지속성을 구분할 수 있어 응용 환경에 맞는 선택이 가능하다.

LocalStorage

• 명시적으로 지우지 않는이상 브라우저가 종료되도 남아있다.
• 도메인마다 LocalStorage가 생성된다.
• 서로 다른 브라우저 탭이라도 동일한 도메인이라면 동일한 로컬 스토리지를 사용한다.(브라우저가 다르면 공유x)

SessionStorage

• 브라우저를 닫을 경우 저장된 데이터가 삭제된다.
• 같은 도메인이라도 브라우저가 탭이다르면, 서로 다른 영역이 된다
  
  

사용법

localStorage.setItem("access_token", "sw"); // 저장
localStorage.getItem("access_token"); // 조회 : sw
localStorage.removeItem("access_token"); // access_token 으로 설정된 키로 접근하여 삭제
localStorage.clear(); // 전체 삭제

sessionStorage.setItem("access_token", "sw"); // 저장
sessionStorage.getItem("access_token"); // 조회 : seokwoo
sessionStorage.removeItem("access_token"); // access_token 으로 설정된 키로 접근하여 삭제
sessionStorage.clear(); // 전체 삭제

Cookie

HTTP의 일종으로 사용자가 어떠한 웹 사이트를 방문할 경우, 서버에서 사용자의 브라우저에 저장하는 작은 기록 정보 파일이다.

서버가 쿠키를 만들어 브라우저에게 보내고,브라우저에서 저장했다가 요청을 했을떄 다시 서버에 보내주는 문자열이다.

구성요소

• 이름 : 각각의 쿠키를 구별하는데 사용되는 이름
• 값 : 쿠키의 이름과 관련된 값
• 유효시간 : 쿠키의 유지시간
• 도메인 : 쿠키를 전송할 도메인(브라우저 도메인)
• 경로 : 쿠키를 전송할 요청 경로
  
  

특징

• 클라이언트에 총 300개의 쿠키를 저장할 수 있다.
• 하나의 도메인 당 20개의 쿠키를 가질 수 있다.
• 하나의 쿠키는 4KB(=4096byte)까지 저장 가능하다.
• 브라우저에 저장되는 'key-value'쌍의 데이터 파일
  
  

동작방식

1. 클라이언트가 HTTP Request 를 서버에게 보냄

2. 서버에서 유효성(회원인지)확인 후,쿠키를 생성한뒤, HTTP Response 헤더에 쿠키 넣어 응답

3. 클라이언트는 HTTP Response의 header에서 쿠키를 추출하여 저장

4. 클라이언트가 Request하고 싶을 때, HTTP가 해당 쿠키를 찾아 header에 자동으로 넣어서 전송
   
   

생명주기

• 만료기간에 따라 브라우저를 종료해도 계속해서 남아 있을 수 있다.
• 세션쿠키(만료기간이 없는 쿠키)는 브라우저가 닫히면 삭제됨